简介
jquery-typeahead 是一款基于 jQuery 的自动完成插件，它可以帮助我们在输入框中快速搜索并展示匹配的结果。使用该插件可以提升用户体验和搜索效率。
安装
通过 npm 安装：
npm install jquery-typeahead
然后将 jquery-typeahead/dist/jquery.typeahead.min.js 和 jquery-typeahead/dist/jquery.typeahead.min.css 引入到您的 HTML 文件中。
基本使用
在 HTML 中创建一个输入框：
<input type="text" id="search-input">
使用以下代码初始化插件：
$('#search-input').typeahead({ source: ['apple', 'banana', 'orange'] });这里传入了一个包含若干个字符串的数组作为
source参数，表示可供搜索的条目列表。现在您可以在输入框中开始输入文字并按下回车键或者点击下拉菜单中的任意一项来选择一个条目。
高级用法
异步获取数据
如果需要从服务器异步获取数据，可以使用 source 函数来替代直接传入数组。source 函数接受两个参数：用户当前输入的文本以及回调函数，在数据准备好后调用该回调函数即可。
-- -------------------- ---- -------
------------------------------
------- --------------- --------- -
-- -- ---------- ----------
---------------- - -- ----- -- -------------- -
-- -------------
---------------------
---
-
---自定义模板
可以使用 template 参数来自定义下拉菜单项的 HTML 模板。模板字符串中可以使用占位符表示当前条目的各个属性。
$('#search-input').typeahead({
source: ['apple', 'banana', 'orange'],
template: '<span class="name">{{name}}</span><span class="price">{{price}}</span>',
display: 'name'
});这里使用了 display 参数来指定显示在输入框中的文本是条目的哪个属性。
多个数据源
如果需要同时搜索多个数据源，可以使用 matcher 函数和 source 数组来实现。matcher 函数接受两个参数：用户当前输入的文本以及一个匹配函数。该函数应当遍历所有可能的数据源并调用匹配函数来判断每个条目是否匹配当前查询条件。
-- -------------------- ---- -------
------------------------------
-------- --------------- ----- -
------ ----------------------------------------------- --- ---
--
------- -
-
----- ---------
----- --------- --------- ---------
--
-
----- -------------
----- ---------- -------- ---------
-
--
--------- -
-------------- -------------- ------ -
---------------------- ----- ------ ----- -------------------
-
-
---这里使用了 callback 参数来设置搜索请求发送前的回调函数，以便在控制台中显示当前搜索的数据源名称。
总结
通过本文，您应该已经了解了 jquery-typeahead 插件的基本用法和部分高级用法。希望本文可以帮助您更好地利用该插件提升用户体验和搜索效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36935