javascript - Jquery:如何为页面上的多个搜索字段启用自动完成功能？

Question

我在一个页面上有三个搜索表单，它们的行为完全相同，我想为所有三个表单附加一个自动完成功能。这是我页面上的 Jquery 脚本:

<script>
  $(function() {
    $( ".search-form" ).autocomplete({
      dataType: "json",
      source: "/app/searches.js"
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
      return $( "<li></li>" )
      .data( "item.autocomplete", item )
      .append( item.desc )
      .appendTo( ul );
    };
  });
</script>

以及三个搜索表单域:

<input id="search1" class="search-form"/>

<input id="search2" class="search-form"/>

<input id="search3" class="search-form"/>

自动完成仅适用于第一个输入字段 (search1)——即显示来自 json 字符串的数据。

然而，对于其他搜索字段(search2 和 search3)，我只得到空白列表(“<li></li>”)，没有来自 JSON 字符串的任何数据。

有没有办法将自动完成附加到所有三个搜索字段，以便所有三个都显示来自 JSON 字符串的数据？

Answer 1

This demo适合我。

在您的代码中，它只是更改了一个自动完成实例的 _renderItem 函数。

编辑 jQuery UI Autocomplete Formatting for Multiple Elements 可能重复