如何为页面上的多个搜索字段启用自动完成功能?

Jquery: How do I enable autocomplete for multiple search fields on a page?

本文关键字：启用 字段 功能 成功 搜索      更新时间：2023-09-26

我在一个页面上有三个完全相同的搜索表单，我想为这三个表单附加一个自动完成功能。这是我在我的页面上的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字符串的数据?

这个演示对我来说很好。

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

Edit: jQuery UI自动完成多元素格式的可能副本

相关文章：