在 Jquery 自动完成建议中显示额外的属性，例如在搜索过程中同时显示名字和姓氏答案

【问题标题】：Show extra property in Jquery Autocomplete Suggestion e.g. show both First & Last Name during search在 Jquery 自动完成建议中显示额外的属性，例如在搜索过程中同时显示名字和姓氏
【发布时间】：2017-07-21 02:53:00
【问题描述】：

我正在使用 jquery 自动完成功能。我希望建议列表也显示姓氏字段。这将帮助用户选择正确的选项，尤其是当建议列表中有 2 个或更多相同的名字时。我将感谢您的任何帮助。

<input type="text" name="names" id="names"/>

<script type="text/javascript" src="au/scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="au/src/jquery.autocomplete.js"></script>

<script>    
   var names = [
    { value: 'Jason', lastname: 'Borne' },
    { value: 'Jason', lastname: 'Derulo' },
    { value: 'Roberto', lastname: 'Carlos' },
    { value: 'Denzel', lastname: 'Washington' }
    ];

    $('#names').autocomplete({
    lookup: names,
        onSelect: function (suggestion) {
            alert('You selected: ' + suggestion.value + ' ' + suggestion.lastname);
        }
});
</script>

【问题讨论】：

您是否将 {value: 'Json Borne'} 视为名称数组中的元素，或者您是否正在寻找更优雅的解决方案，可能将额外的参数传递给自动完成以指示它也应该显示姓氏。
是的，这是一种方法，但我想知道如何用代码来做。知道如何使用很有用，因为我有另一个位置自动完成功能，有一些相同的地方，向用户提供提示的一种方法是在建议列表中显示带有状态的值（位置）。
知道怎么做 Jarek 吗？如果您有解决方案，我将不胜感激

标签： javascript jquery json autocomplete

【解决方案1】：

您需要创建一个源属性，该属性实现一个函数，将用户输入term 与您的数据进行比较，并将过滤后的值传递给response。此外，您需要在响应数组中提供 label 和 value 属性。这些属性告诉 jQuery 在自动完成建议中显示什么以及当用户选择一个值时在文本框中输入什么。

var names = [{
    value: 'Jason',
    lastname: 'Borne'
  },
  {
    value: 'Jason',
    lastname: 'Derulo'
  },
  {
    value: 'Roberto',
    lastname: 'Carlos'
  },
  {
    value: 'Denzel',
    lastname: 'Washington'
  }
];

$('#names').autocomplete({
  source: function(request, response) {
    var term = request.term.toLowerCase();
    var filteredData = [];
    names.forEach(function(name) {
      if(name.value.toLowerCase().indexOf(term) >= 0 || name.lastname.toLowerCase().indexOf(term) >= 0) {
        filteredData.push({
          label: name.value + ' ' + name.lastname,
          value: name.value + ' ' + name.lastname
        })
      }
    });
    
    response(filteredData);
  },
  
  lookup: names,
  onSelect: function(suggestion) {
    alert('You selected: ' + suggestion.value + ' ' + suggestion.lastname);
  }
});

<link href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<input type="text" name="names" id="names" />

【讨论】：

感谢 Nisarg Shah 提供此解决方案。我真的很感激:)
感谢您花时间帮助我。
它的效果很好，但是当列表很大时，会有延迟，有时浏览器会崩溃。有没有办法让它适用于大型远程列表？
是的，尝试将标签和值属性添加到源数据。如果它们在源代码中可用，则可以在比较和过滤期间节省一些性能成本。

【解决方案2】：

看看当你改变这个时会发生什么

   var names = [
    { value: 'Jason', lastname: 'Borne' },
    { value: 'Jason', lastname: 'Derulo' },
    { value: 'Roberto', lastname: 'Carlos' },
    { value: 'Denzel', lastname: 'Washington' }
    ];

到这里：

 var names = [
    { value: 'Jason Borne' },
    { value: 'Jason Derulo' },
    { value: 'Roberto Carlos' },
    { value: 'Denzel Washington' }
    ];

【讨论】：

感谢您花时间帮助我。

【解决方案3】：

我需要一个更好的解决方案，它可以支持大数据，并且可以毫不拖延地显示其他建议字段，例如而不是自动完成只显示值（名字），我需要自动完成来显示 2 个属性，值和姓氏。

Solution jsfiddle

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-flexdatalist/2.1.3/jquery.flexdatalist.min.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js?ver=1.12.3'></script>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-flexdatalist/2.1.3/jquery.flexdatalist.min.js"></script>

<input type="text" name="fullnames" id="fullnames"/>

我把自动补全插件改成了jQuery.flexdatalist

var names = [
    { value: 'Jason', lastname: 'Borne' },
    { value: 'Jason', lastname: 'Derulo' },
    { value: 'Roberto', lastname: 'Carlos' },
    { value: 'Denzel', lastname: 'Washington' }];

    $('#fullnames').flexdatalist({
    minLength: 2,
    selectionRequired: true,
    visibleProperties: ["value","lastname"],
    searchContain: true,
    searchIn: 'value',
    searchDelay: 300,
    noResultsText: 'No results found for "{keyword}"',
    data: names
}).on("select:flexdatalist",function(event, data){
    // do something when user selects
});

您可以将脚本包含在页面中，或者将其保存为 JavaScript 文件并包含为远程脚本文件，如果您有大数据，这尤其有用

<script type='text/javascript' src='https://yourdomain.com/blah/blah/blah/yourscript.js'></script>

到目前为止，我使用它时没有任何延迟和问题。 用 54040 行的数据对其进行了测试，即使在移动设备上也能正常工作。我希望它可以帮助某人:)

【讨论】：