Jquery ui JQuery UI自动完成名字和姓氏字段

我想其他人会有这个问题，但我似乎在任何地方都找不到答案。我想有两个输入字段，名字和姓氏，具有相同的自动完成源。当用户在“名字”和“姓氏”字段中键入时，我希望“自动完成”下拉列表通过匹配“名字”和“姓氏”字段以及“姓氏”字段进行过滤

我的代码目前正在两个字段上实现自动完成

 $(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

---

当前工作方式：

我必须将函数放在源选项中，并选择autocomplete小部件的事件

$("#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转换过来。

我必须将函数放在源选项中，并选择autocomplete小部件的事件

$("#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转换过来。

我也有同样的问题，但还需要对中间名匹配的支持。 最后我做了三个函数，只是修改了正则表达式以匹配不同的情况

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

---

我有同样的问题，但也需要支持中间名匹配。 最后我做了三个函数，只是修改了正则表达式以匹配不同的情况

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

---

挑剔我想我没有明智地选择名字。我将编辑我的名字并添加一个链接。Ug，我的坏。我误解了你的问题。不过，底线是，你不能指望自动完成程序知道你要搜索的文本的哪一部分——它使用整个字符串。如果你不想，你必须明确地告诉它。您可能需要先研究拆分输入。@j08691没关系。我想我差不多已经弄明白了。当我让它工作时，我会发布一个答案。我想我没有明智地选择名字。我将编辑我的名字并添加一个链接。Ug，我的坏。我误解了你的问题。不过，底线是，你不能指望自动完成程序知道你要搜索的文本的哪一部分——它使用整个字符串。如果你不想，你必须明确地告诉它。您可能需要先研究拆分输入。@j08691没关系。我想我差不多已经弄明白了。当我让它工作时，我会发布一个答案。