Jquery的autocomplete插件用法及参数讲解

当您需要在网站上实现一个带有自动提示的搜索框时，jQuery的autocomplete插件是一个非常有用的工具。下面我们将详细讲解jQuery的autocomplete插件的用法及参数讲解：

1. 引用autocomplete插件

首先，您需要下载jQuery的autocomplete插件并引用它：

<!-- 引用 jQuery CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 引用 jQuery UI CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />

<!-- 引用 jQuery autocomplete CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.devbridge-autocomplete/1.4.11/jquery.autocomplete.min.js"></script>

2. 初始化autocomplete插件

其次，你需要初始化一个autocomplete输入框，来监听用户的输入。你可以使用autocomplete()函数，并指定一个参数对象来初始化autocomplete插件。下面是一个例子：

<input type="text" id="myInput">

<script>
  $(function() {
    $("#myInput").autocomplete({
      source: ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig"],
      delay: 500
    });
  });
</script>

在这个例子中，我们初始化了一个id为“myInput”的输入框。source参数指定了提示列表，其值是一个包含字符串的数组。delay参数指定了在用户输入后多少毫秒后开始搜索，这是可选的。

3. 处理autocomplete选中事件

当用户选择一个提示词后，可能需要处理选择后的事件。可以使用select选项来添加一个回调函数来处理选择事件。下面是另一个示例，这个示例展示了如何在选择后显示一个消息框：

<input type="text" id="myInput">

<script>
  $(function() {
    $("#myInput").autocomplete({
      source: ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig"],
      select: function(event, ui) {
        alert(ui.item.value + " selected");
      },
      delay: 500
    });
  });
</script>

在这个示例中，我们添加了一个select选项，当用户选择一个提示词时，会调用该回调函数。该函数的ui.item.value属性包含了用户所选中的提示词的值。

4. autocomplete插件的参数

以下是autocomplete插件的一些常用参数：

参数	类型	描述
source	Array	包含提示词的数组，或是一个函数，该函数返回一个含有提示词的数组。
delay	Number	指定在用户输入后多少毫秒后开始搜索，避免太频繁调用自动完成。
minLength	Number	指定触发自动提示的最小字符数。
select	Method	触发自动提示选择事件的回调函数。

5. 自定义自动提示

你可以使用自定义模板来渲染提示词。使用 renderItem 选项重写要呈现的文本结构。在以下示例中，我们使用 renderItem 自定义样式：

<input type="text" id="myInput">

<script>
  $(function() {
    $('#myInput').autocomplete({
      source: [
        { label: "Apple", value: 1, category: "Fruits" },
        { label: "Banana", value: 2, category: "Fruits" },
        { label: "Cake", value: 3, category: "Bakery" },
        { label: "Coffee", value: 4, category: "Drinks" },
        { label: "Donut", value: 5, category: "Bakery" }
      ],
      minLength: 2,
      select: function(event, ui) {
        $("#result").text(ui.item.label + " selected");
      },
      open: function() {
        var width = $(this).autocomplete("widget").outerWidth();
        $(this).autocomplete("widget").css("width", width);
      },
      renderItem: function(item, suggest) {
        var re = new RegExp("^" + this.term, "gi");
        var category = item.category;
        var label = item.label.replace(re, "<span style='font-weight:bold;color:Blue;'>" + "$&" + "</span>");
        return $("<div></div>")
          .append("<span>" + label + "</span>")
          .append("<span class='ml-3'><i class='fa fa-tag'></i> "+ category + "</span>")
          .appendTo("#autocomplete");
      }
    });
  });
</script>

<div id="autocomplete"></div>
<div id="result"></div>

在这个例子中，我们使用了一个数组来设置提示词，每个元素都包含了一个 label 属性表示要显示的文本，以及一个 value 属性表示在选择后将要提交的值。我们还设置了自定义模板来渲染呈现的文本。在这里，我们将标签替换为包含匹配字符串的亮蓝色外壳，鼠标悬停时显示标签。

6. 总结

以上是关于jQuery的autocomplete插件的使用方法及参数的完整攻略。您可以根据您的具体需求来定制和修改参数以满足您的应用需求。希望以上内容对您有所帮助。