Question

我认为其他人会有这个问题，但我似乎无法在任何地方找到答案。我想有2个输入字段，名字和姓氏，具有相同的自动完成源。当用户键入名字和姓氏字段时，我希望通过将第一个名称与第一个名称字段匹配并将姓氏字段与姓氏字段匹配来过滤自动完成下拉列表。

目前我的代码，只是在两个字段上实现自动完成。

 $(function() {
   var names = ["John Smith", "Jimothy Doe", "Stuart Brown"];
   $( "#firstname" ).autocomplete({
   source: names
   });
   $( "#lastname" ).autocomplete({
   source: names
   });
 });


 <input type='text' id='firstname' />
 <input type='text' id='lastname' />

在第一个字段中键入J将显示John Smith和Jimothy Doe，但在第二个字段中键入S只会显示John Smith，而不是Stuart Brown。

目前的工作原理：http://jsfiddle.net/HSYYz/1/

Answer 1

我必须将函数放在source选项中并选择自动完成小部件的事件。

$("#firstname, #lastname").autocomplete({
  source: function(request, response) {
    term1 = $("#firstname").val();
    term2 = $("#lastname").val();
    names2 = new Array();
    i = 0;
    while (i < names.length) {
      namesSplit = names[i].split(RegExp(" +"));
      j = 2;
      while (j < namesSplit.length) {
        namesSplit[1] += " " + namesSplit[j];
        j++;
      }
      if (namesSplit[0].match(term1) && namesSplit[1].match(term2)) {
        names2.push(names[i]);
      }
      i++;
    }
    response(names2);
  },
  select: function(event, ui) {
    uiSplit = ui.split(RegExp(" +"));
    $("#firstname").val(uiSplit[0]);
    $("#lastname").val(uiSplit[1]);
  }
});

很抱歉，如果代码有点粗糙;我不得不从coffeescript转换它。

Answer 2

我遇到了同样的问题，但也需要支持中间名称匹配。我最终制作了三个函数，只是更改正则表达式以匹配不同的情况。

$( "#firstnameInput" ).autocomplete({
        source: function( request, response ) {
            //matches first letter of the whole name
            var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
            response( $.grep( fullnavnArray, function( item ){
                return matcher.test( item );
            }) );
       }
    });

    $( "#middlenameInput" ).autocomplete({
        source: function( request, response ) {
            //matches "space" name "space" 
            var matcher = new RegExp( "\\s" + $.ui.autocomplete.escapeRegex( request.term ) +"\\w+\\s", "i" );
            response( $.grep( fullnavnArray, function( item ){
                return matcher.test( item );
            }) );
       }
    });

    $( "#lastnameInput" ).autocomplete({
        source: function( request, response ) {
            //matches "space" name  
            var matcher = new RegExp( "\\s" + $.ui.autocomplete.escapeRegex( request.term )+"\\w+$", "i" );
            response( $.grep( fullnavnArray, function( item ){
                return matcher.test( item );
            }) );
       }
    });

在名字和姓氏字段上使用JQuery UI自动填充

2 个答案: