npm 是 Node.js 软件包管理器，提供了上万个包，方便我们在前端开发中快速搭建应用。其中，talquei 是一个非常好用的 npm 包，它提供了一个高度自定义的搜索框，可以快速定位到指定内容。本文将详细介绍 talquei 的使用方法，包括它的安装、初始化、基本配置和用法。
安装
使用 npm 安装 talquei，打开命令行进入项目目录，输入：
npm install talquei
短短一行命令就可以完成安装。接下来，我们就可以在项目中引入 talquei 库了。
初始化
在项目中，我们先引入 talquei 库，然后通过 JavaScript 代码对其进行初始化。示例代码如下：
-- -------------------- ---- -------
------ ------- ---- ----------
----- ------ - --- ---------
-------------- ----------------
------------- ---------------
--------- ------- -- -
-- ------
----- ---- - -
----------
------
----------
-------
-----
--
------ ---------------- -- ------------------------
--
------------ ------ ------ -- -
---------------- ---------- ------
-
---有了上面的代码，我们就可以在页面添加一个搜索框了。其中 inputSelector 是输入框的 css 选择器，listSelector 是搜索结果列表的 css 选择器，onSearch 是搜索操作的回调函数，itemClick 是搜索结果列表项被点击时的回调函数。这里，我们只是模拟了数据搜索，实现上需要你根据业务需求进行具体处理。
基本配置
talquei 提供了许多配置项，可以自定义搜索框的外观和行为。
启用下拉提示
默认情况下，talquei 插件不会在用户输入搜索字符时显示下拉提示。我们需要将 enableAutoComplete 配置项设置为 true，即可开启下拉提示。
const search = new talquei({
enableAutoComplete: true,
// 其它配置
});更改下拉提示模板
talquei 的下拉提示模板是基于 Mustache.js 的。我们可以修改模板来定制下拉提示样式。
const search = new talquei({
templates: {
autoComplete: '<li>{{text}}</li>',
autoCompleteNone: '<li class="no-results">找不到相关内容</li>',
},
// 其它配置
});autoComplete 模板是搜索结果列表项的模板，text 是 talquei 自动帮你渲染的默认变量。如果你需要渲染其它数据，可以直接在搜索项数组中添加新的属性。autoCompleteNone 模板则是找不到搜索结果时的提示。添加了 no-results 的 css 类，用于自定义样式。
更改键盘事件
下拉提示框的显示和隐藏，通常由按下或释放键盘按键来触发。默认情况下，talquei 监听键盘事件的 keyCode 为 13 和 40。我们可以传入自定义的 keyCode 数组。
const search = new talquei({
keyCodes: [13, 38, 40],
// 其它配置
});支持多个搜索框联动
针对搜索框联动，我们可以使用 talquei 的 searchFor 配置项。
-- -------------------- ---- ------- ----- ------- - --- --------- -------------- ------------ ------------- ----------------- ---------- ------------- -- ---- --- ----- ------- - --- --------- -------------- ------------ ------------- ----------------- ---------- ------------- -- ---- ---
这样，当我们在 #search-1 中进行搜索时，#search-2 也会接收到同步更新的结果，反之亦然。
用法
在 talquei 里，我们需要先实例化搜索框对象，然后才能对其进行操作。常见的操作有 search、clear 和 update。
search()
搜索框实例的 search() 方法会立即执行搜索操作，输入框的内容会传入 onSearch 搜索回调中。
search.search();
clear()
搜索框实例的 clear() 方法用于清空搜索框中的内容，同时将搜索框列表隐藏。
search.clear();
update()
搜索框实例的 update() 方法更新搜索框列表中的选项。当搜索列表项或数据发生变化时需调用此方法。
search.update();
总结
talquei 是一个非常有用的 npm 包，为我们的前端开发提供了便利。通过本篇文章的介绍，相信大家已基本掌握 talquei 的使用方法，可以根据需求自由地进行定制化配置。另外，值得注意的是，talquei 搜索功能是基于输入框中的数据来工作，所以在使用过程中一定要结合实际场景进行代码编写。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067378890c4f72775840e5