介绍
smart-autocomplete 是一个基于 jQuery 和 Handlebars 的自动补全插件，能够根据用户输入的内容实时搜索匹配的数据，并在下拉框中展示匹配结果，支持键盘上下键和回车键选中选项。它可以减轻用户在输入时的负担，提高交互效率，是一个很实用的组件。
该插件已经打包成 npm 包，可以通过 npm 下载到本地使用，本篇文章就来介绍它的使用方法。
安装
在终端中输入以下命令即可安装 smart-autocomplete：
npm install smart-autocomplete
使用
引入
- 在 HTML 中引入 jQuery 和 Handlebars：
<!-- jQuery 的 CDN --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- Handlebars 的 CDN --> <script src="https://cdn.bootcdn.net/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
- 在 HTML 中引入 smart-autocomplete：
<!-- smart-autocomplete 的路径 --> <script src="./node_modules/smart-autocomplete/dist/jquery.smart-autocomplete.js"></script>
初始化
- 创建一个输入框：
<input type="text" id="autocomplete-input" />
- 设置插件的参数：
var options = {
url: './data.json', // 数据源的 URL，返回一个 json 格式的数组
filterKey: 'name', // 用于匹配的 key
maxShowItems: 5, // 下拉框中最多展示多少条匹配结果
template: '{{name}}' // 自定义模板字符串
};- 初始化插件：
$('#autocomplete-input').smartAutocomplete(options);参数说明
smart-autocomplete 的参数如下：
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| url | string | null | 数据源的 URL，返回一个 json 格式的数组 |
| data | object | null | 手动传入的数据源，数据格式同 url |
| filterKey | string | 'name' | 用于匹配的 key |
| maxShowItems | number | 5 | 下拉框中最多展示多少条匹配结果 |
| delay | number | 200 | 用户输入结束后触发搜索的延迟时间，单位为毫秒 |
| autoFocus | boolean | false | 是否开启自动聚焦 |
| template | string | '{{name}}' | 自定义模板字符串，用于生成每个匹配结果的 HTML，可以使用 Handlebars 的语法习惯进行书写 |
| displayKey | string | '' | 自定义下拉框中每个选项显示的内容的 key |
| preLoad | boolean | false | 是否在页面加载时就预先加载数据 |
| hideOnNoResult | boolean | true | 是否在没有匹配结果时隐藏下拉框 |
事件
smart-autocomplete 提供了 3 个事件供开发者使用：
| 事件名称 | 描述 |
|---|---|
| beforeSearch | 发起搜索前触发的事件 |
| onSearchSuccess | 搜索成功后触发的事件，参数为匹配结果的数组 |
| onSearchError | 搜索失败后触发的事件，参数为 jQuery 的 jqXHR 对象 |
| onItemSelected | 选中某个匹配结果时触发的事件，参数为选中结果的数据 |
| onCustomRendered | 定制渲染时触发的事件，参数为当前匹配结果的数据 |
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------------------------
------- ----------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------
-------
--------------------- -
--------- ---------
-------- -------------
------ ------
------- ----- -----
------- --- ----- ------
-
------------------- -
------ -----
-------- ----
------- -----
-------- -----
-
------------------ -
--------- ---------
---- -----
----- --
------ --
------- --- ----- -----
-------------- ----
----------------- ------
-
------------------ -
-------- --- ----
------- --------
-
------------------------ -
----------------- --------
-
------------------------- -
----------------- --------
------ ------
-
--------
-------
------
---- -----------------------------
------ ----------- ----------------------- --
--- -------------------------------
------
--------
---------- -- -
--- ------- - -
---- --------------
---------- -------
------------- --
--------- ---- ----------------------------------------
--
----------------------------------------------------
---
---------
-------
-------拓展
smart-autocomplete 暂时只支持通过 URL 或手动传入数据源的方式获取数据。如果需要在使用时实时动态获取数据，可以通过监听输入框的输入事件，在用户输入结束后再查询并更新数据源，更新后需要手动更新界面。
同时，如果想丰富下拉框中每个选项的内容，可以自定义模板字符串，使用 Handlebars 的语法做出你想要的效果。另外，还可以通过自定义参数 displayKey 改变每个选项的显示内容。
结语
smart-autocomplete 是一个轻便实用的自动补全组件，通过学习本文，相信大家已经能掌握它的基本使用方法。如果需要更详细的说明，可以参考官方文档： https://github.com/l-lin/jquery-smart-autocomplete 。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f8c238a385564ab6e55