在前端开发过程中，自动补全功能已经成为了一个很常见的功能。而typeahead.js是一个非常优秀的库，它可以方便地实现各种自动补全效果。在本篇文章中，我们将介绍如何使用typeahead.js 0.10版本来实现远程数据源的自动补全功能。
准备工作
在开始使用typeahead.js之前，需要先准备好以下内容：
- 引入jquery和typeahead.js库文件。
- 有一个可以返回json格式数据的后台API接口。
- 在HTML页面中创建一个输入框元素，并给它一个唯一的id属性值。
下面是一个简单的HTML示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------------- ------ --------------- -------- ----------------------------------------------------------- -------- ------------------------------------------------------------------------------------------ ------- ------ ------- ----------- ----------------- --------------------- ------- -------
实现步骤
- 初始化typeahead.js插件
在jQuery加载完成后，在页面底部加入以下脚本：
-- -------------------- ---- -------
---------------------------- -
--- --------- - ------------------- -- ----------
------------------------------
----- -----
---------- -----
---------- -
--
-
----- ---------
------- --------------- -------- -
------ ---------------- - -- ----- -- -------------- -
------ --------------
---
-
---
---解析：在这段代码中，我们首先使用jQuery的ready()方法来确保文档已经加载完毕。然后定义了一个变量remoteUrl，它是我们远程获取数据的URL地址。
接下来，我们调用typeahead.js插件，并传入以下两个参数：
- 第一个参数包含一些选项设置，如是否启用提示、是否高亮匹配的字符串、最小输入长度等。
- 第二个参数是一个对象，它包含了source函数，该函数将返回异步请求的数据。
- 定义远程数据源
在上面的代码中，我们定义了一个名为remote的数据源，可以看到它有一个source属性值，指向一个函数。此时，我们需要定义这个函数。
{
name: 'remote',
source: function(query, process) {
return $.get(remoteUrl, { q: query }, function(data) {
return process(data);
});
}
}解析：当用户在输入框中输入字符并提交时，Typeahead会调用source函数，并将查询字符串和process回调函数作为参数传递进去。在source函数中，我们使用jQuery的$.get()方法向服务器发送GET请求，并将查询字符串q作为参数传递给服务器处理程序。然后，当服务器返回JSON数据时，我们将数据传递给process函数。
- 处理远程数据源
在完成了第一步和第二步后，我们还需要处理服务器返回的JSON数据。在Typeahead中，默认情况下期望获取以下格式的数据：
-- -------------------- ---- -------
-
-
------ ---------
------ --------
--
-
------ ---------
------ --------
--
---
-其中value属性表示选项的实际值，而label属性则表示要显示在下拉列表中的文本。
因此，当我们从服务器获取到数据时，需要将其转换成Typeahead所需的格式。例如，服务器返回以下格式的JSON数据：
-- -------------------- ---- -------
-
-
--- --
----- ----- ------
--
-
--- --
----- ----- ----
--
---
-可以通过以下方式转换成Typeahead所
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15636