介绍
jquery.autocomplete-multiple 是一个能够提供自动补全多选功能的 jQuery 插件。该插件利用了 jQuery UI Autocomplete 控件的能力，提供了多选的功能，同时在用户添加或移除标签时提供了事件回调，方便定制。
安装
在项目中使用 npm 安装：
npm install --save jquery.autocomplete-multiple
使用
在你的 HTML 文件中，引入必要的库和代码：
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="jquery.autocomplete-multiple.min.js"></script>
准备好需要自动补全的输入框元素：
<input type="text" id="my-input">
在 JavaScript 中，将其转换并设置：
$('#my-input').autocompleteMultiple({
// 选项
});选项
jquery.autocomplete-multiple 提供了许多选项，可以帮助你定制自己的自动补全多选控件。下面列出了一些重要选项和用法示例：
url
当需要从服务器获取数据时，你可以通过此选项设置数据源 URL：
$('#my-input').autocompleteMultiple({
url: '/api/tags'
});data
可以通过此选项直接传递数据，而不是从服务器获取：
$('#my-input').autocompleteMultiple({
data: ['foo', 'bar']
});onChange
每当用户添加或移除标签时，都会触发此事件。可以通过它完成一些数据操作：
$('#my-input').autocompleteMultiple({
onChange: function (input, tags) {
console.log(tags);
}
});minLength
可以通过此选项设置什么时候开始搜索，下面的代码表示用户输入至少两个字符后，才开始搜索：
$('#my-input').autocompleteMultiple({
minLength: 2
});maxTags
可以使用此选项限制用户可以添加的最大标签数：
$('#my-input').autocompleteMultiple({
maxTags: 5
});完整示例
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ------------ -------- ----------------
----- ---------------- --------------------------------------------------------------------------
-------
------
------ ----------- --------------
------- -----------------------------------------------------
------- ------------------------------------------------------------
------- ---------------------------------------------------
--------
-------------------------------------
---- ------------
---------- --
-------- --
--------- -------- ------- ----- -
------------------
-
---
---------
-------
-------总结
jquery.autocomplete-multiple 是一个非常实用而且方便的 jQuery 插件，可以帮助你快速构建一个自动补全多选控件。本文介绍了 jquery.autocomplete-multiple 的使用方法和一些重要选项。希望它可以帮助你在项目中更好地使用该插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005752781e8991b448ea426