前言
在前端开发中，我们经常需要使用到一些开源的库和框架来帮助我们提高开发效率。其中，jQuery 是一个非常流行的 JavaScript 库，它可以方便地操作 DOM、处理事件等。而在 jQuery 的基础上，还有许多插件可以用来完成更加复杂的任务。
今天我要介绍的是一个 jQuery 插件：jquery-tokeninput。这个插件可以帮助我们实现一个自动补全功能，类似于 Google 搜索框那样可以提示用户输入的关键词。
安装
我们可以通过 npm 来安装 jquery-tokeninput：
npm install jquery-tokeninput --save
如果你还没有安装 jQuery，也需要安装它：
npm install jquery --save
使用方法
首先，在 HTML 文件中引入 jQuery 和 jquery-tokeninput 的 CSS 文件和 JS 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------------ ---------- ----- ---------------- ------------------------------------ -- ------- ------------------------------------- ------- -------------------------------------------- ------- ------ ---- ------- ---- -- --- ------- -------
然后，在 JavaScript 文件中配置 jquery-tokeninput：
$(function() {
$('#myInput').tokenInput('/search', {
propertyToSearch: 'name'
});
});这里的 #myInput 是你要添加自动补全功能的输入框的 ID，/search 是一个 URL，表示查询数据的接口。propertyToSearch 表示要搜索的属性，可以是对象中的任何一个属性。
最后，在服务器端实现 /search 接口，并返回一个类似于下面这样的 JSON 数组：
[
{"id": 1, "name": "JavaScript"},
{"id": 2, "name": "Java"},
{"id": 3, "name": "Python"},
{"id": 4, "name": "PHP"}
]这里的 id 表示每个关键词的 ID，name 表示每个关键词的名称。
高级用法
jquery-tokeninput 还支持许多高级用法，比如：
动态设置数据源
可以通过设置 url 属性来动态设置数据源：
$('#myInput').tokenInput({
url: '/search',
propertyToSearch: 'name'
});自定义模板
可以通过设置 resultsFormatter 和 tokenFormatter 属性来自定义模板：
-- -------------------- ---- -------
----------------------------------- -
----------------- -------
----------------- -------------- -
------ ------ - --------- - --------
--
--------------- -------------- -
------ ------ - --------- - --------
-
---自定义提示文本
可以通过设置 hintText 属性来自定义提示文本：
$('#myInput').tokenInput('/search', {
propertyToSearch: 'name',
hintText: '请输入关键词'
});总结
jquery-tokeninput 是一个非常实用的 jQuery 插件，它可以帮助我们实现自动补全功能。本文介绍了 jquery-tokeninput 的基本用法和一些高级用法，希望能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34179