Typeahead.js 是一个强大的前端自动补全库，可以极大地提升用户输入效率和体验。本文将详细介绍如何使用该 npm 包，并提供一些实用技巧和示例代码。
安装和引入
首先，我们需要在项目中安装 typeahead.js。在终端中运行以下命令即可：
npm install typeahead.js --save
接下来，在 HTML 文件中引入以下文件：
<!-- typeahead.js 核心文件 --> <script src="node_modules/typeahead.js/dist/typeahead.bundle.min.js"></script> <!-- 用于样式优化 --> <link rel="stylesheet" href="node_modules/typeahead.js/dist/typeahead.css">
基础使用
Typeahead.js 的基本用法非常简单。我们只需要几行代码就可以为一个输入框添加自动补全功能。
-- -------------------- ---- ------- ----- ------ - --- ------------ -- -------------- ------ ----------- --------- ---------- ----------- ----- --------------- --------------------------------- --------------- -------------------------------- --- -- --- ------------ -- --------------------------- ----- ----- -- -------- ---------- ----- -- -------- ---------- - -- ------- -- - ----- --------- -- -------------- ------- ------ -- --- ---
以上代码将为类名为 typeahead 的输入框添加自动补全功能。local 属性指定了数据源，此处使用的是一个字符串数组。queryTokenizer 和 datumTokenizer 则定义了如何解析输入和匹配结果。
进阶使用
Typeahead.js 支持更多高级功能，例如异步加载数据、自定义模板等。以下是一些常见用法示例。
异步加载数据
当数据源过大或需要从后端获取时，我们可以使用 Remote 数据源来实现异步加载：
-- -------------------- ---- -------
----- ------ - --- ------------
-- -- ---- ----
------- -
---- -----------------------
--------- --------
--
--------------- ---------------------------------
--------------- --------------------------------
---
-- --- ------------ --
---------------------------
----- -----
---------- -----
---------- -
--
-
----- ---------
------- ------
---以上代码将从 /api/states 接口中获取数据，并在输入框中实现自动补全功能。
自定义模板
Typeahead.js 默认使用 Handlebars 模板引擎生成下拉列表。我们可以通过覆盖默认模板或自定义模板来实现更灵活的 UI 定制。
-- -------------------- ---- -------
-- ----
----- -------- - ----- --------------- -
------ ----------------------------- -
------ ----------------------------- -
---------
----- ------ - --- ------------
-- ---
------ --
----- ----------
----- ----
--
-
----- ---------
----- ----
--
---
--
--------------- ---------------------------------
--------------- -------------------------------------------- -------
---
-- -------
----- ------------------ - --------- -- -
------ --------------------------------------------
---------------------------------------
-------
--
-- --- ------------ -------
---------------------------
----- -----
---------- -----
---------- -
--
-
----- ---------
------- -------
-------- -------
---------- -
----------- ------------------ -- -------
-
---以上代码将使用自定义模板 template 渲染下拉列表，并
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32346