介绍
jquery-autocomplete 是一个基于 jQuery 的自动补全插件，可以帮助我们快速地实现输入框的自动提示功能。它支持本地数据源和远程数据源，并提供了非常丰富的选项来满足我们各种需求。
这篇文章将会为大家介绍 jquery-autocomplete 的使用方法，并结合示例代码帮助大家更好地理解。
安装
我们可以通过 npm 来安装 jquery-autocomplete。在命令行中执行以下命令即可：
npm install jquery-autocomplete
基本用法
HTML
首先，在页面上添加一个输入框：
<input id="autocomplete" type="text">
JavaScript
接着，我们需要编写一些 JavaScript 代码来初始化 autocomplete 插件并设置数据源。下面是一个简单的示例：
-- -------------------- ---- -------
-- -- ------ - -------------------
------ - ---- ---------
------ ----------------------
-- ---
----- ------ - -
- ------ -------- ----- ---- --
- ------ --------- ----- ---- --
- ------ --------- ----- ---- --
- ------ --------- ----- ---- -
--
-- -----
---------------------------------
------- -------
--------- -------- ------------ -
----------- -------------------------- ---------------------
-
---在这个示例代码中，我们首先引入了 jQuery 和 jquery-autocomplete 库。然后定义了一个数据源 fruits，它包含了四个水果的名称和对应的中文名。
接着，我们使用 $('#autocomplete') 来选中页面上的输入框，并调用 .autocomplete() 方法来初始化插件。在选项对象中，我们设置了数据源为 fruits，并定义了一个 onSelect 回调函数，在用户选择一个提示时会被触发。
最后，当用户选择完毕后，我们会弹出一个提示框，告诉用户选择的是什么水果以及对应的中文名。
效果
到此为止，基本的自动提示功能已经实现了。当你在输入框中输入 "A" 的时候，会看到下拉列表中出现了 "Apple" 这个选项。当你选择 "Apple" 的时候，会弹出一个提示框，告诉你选的是苹果。
进阶用法
除了基本用法之外，jquery-autocomplete 还提供了许多高级选项，可以帮助我们更好地控制插件的行为。下面是一些常用的进阶用法。
自定义模板
默认情况下，jquery-autocomplete 会使用内置的模板来渲染每个提示选项。但是如果我们想要定制化每个选项的样式，可以使用 formatResult 选项来自定义模板。
$('#autocomplete').autocomplete({
lookup: fruits,
formatResult: function(suggestion, currentValue) {
return `<div class="autocomplete-item"><strong>${suggestion.value}</strong> - ${suggestion.data}</div>`;
}
});在这个示例代码中，我们使用了一个自定义模板来渲染每个提示选项。它包含了水果名称和对应的中文名，并用 CSS 类 .autocomplete-item 来设置样式。当然，你可以按照需求自由定制模板的样式。
远程数据源
除了本地数据源之外，jquery-autocomplete 还支持从远程服务器加载数据。我们可以通过 serviceUrl 选项来指定远程数据源的 URL，同时也需要设置 params 选项来指定查询参数。
$('#autocomplete').autocomplete({
serviceUrl: '/
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/37564) ，转载请注明来源
[https://www.javascriptcn.com/post/37564](https://www.javascriptcn.com/post/37564)