介绍
bootstrap-3-typeahead 是一个基于 Bootstrap 的自动完成组件，可以在输入框中实现自动补全功能，支持异步加载数据源。本文将详细介绍如何使用该 npm 包。
安装
在使用之前，需要先安装相应的依赖包：
npm install bootstrap jquery typeahead.js --save
其中，typeahead.js 是 bootstrap-3-typeahead 的核心库。
基本用法
在 HTML 文件中引入所需的样式和脚本文件：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
然后，在输入框上调用 typeahead() 方法即可启用自动完成功能：
<input class="typeahead" type="text" placeholder="搜索...">
$(document).ready(function() {
var data = ['Java', 'JavaScript', 'Python', 'Ruby', 'Swift'];
$('.typeahead').typeahead({
source: data
});
});以上代码将创建一个带有自动完成功能的输入框，并使用给定的数据作为自动完成的选项。
高级用法
异步加载数据源
如果数据量较大或需要从服务器获取数据源，可以使用 remote 选项来异步加载数据。
-- -------------------- ---- -------
---------------------------- -
---------------------------
------- --------------- -------- -
--------
---- ------------------
----- -------
--------- -------
----- ------- -------
-------- -------------- -
-- -------
--------------
-
---
-
---
---以上代码将发送一个 POST 请求到 /api/suggestion 接口，并将输入框中的内容作为查询条件。服务器返回的数据需要经过处理后传递给 process() 方法。
自定义模板
默认情况下，自动完成列表的选项是简单的文本，可以通过模板来自定义每个选项的呈现方式。
-- -------------------- ---- -------
---------------------------- -
--- ---- - -
---- -- ----- ------- ----- ------
---- -- ----- ------------- ----- ------
---- -- ----- --------- ----- ------
---- -- ----- ------- ----- ------
---- -- ----- -------- ----- -----
--
---------------------------
------- -----
-------- -------
---------- -
----------- -------------- -
------ --------------- - --------- - ---------- -- - --------- - ----------
-
-
---
---以上代码将使用模板来呈现每个选项，其中 display 选项指定了用于显示文本的字段，suggestion 模板用于自定义每个选项的 HTML 结构。
总结
bootstrap-3-typeahead 是一个功能强大且易于使用的自动完成组件，可以提高用户输入效率和体验。本文介绍了其基本用法和高级用法，希望能够帮助读者更好地使用该组件。完整示例代码可参考以下代码库：
https://github.com/bassjobsen/bootstrap-3-typeahead
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34782
