1

我认为其他人会遇到这个问题，但我似乎无法在任何地方找到答案。我想有 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/

4

2 回答 2

1

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

$("#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]);
  }
});

对不起，如果代码有点粗糙；我不得不将它从咖啡脚本转换。

于 2013-06-24T15:46:32.310 回答
0

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

$( "#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 );
            }) );
       }
    });
于 2017-04-26T11:10:08.663 回答