简介
Magicsuggest 是一个轻量级的 jQuery 插件，可以快速创建可定制的联想输入框。它支持自动完成、多选、异步数据源等功能，是前端开发中非常实用的工具。
安装
在使用 Magicsuggest 之前，需要安装和引入相关的依赖包和样式文件。
我们可以通过 npm 来安装：
npm install magicsuggest --save
然后在 HTML 文件中引入相关的样式和 JavaScript 文件：
<link rel="stylesheet" href="node_modules/magicsuggest/magicsuggest-min.css"> <script src="node_modules/magicsuggest/magicsuggest-min.js"></script>
使用
基本用法
首先我们需要在 HTML 中定义一个输入框：
<input type="text" id="input-box">
然后在 JavaScript 中初始化 Magicsuggest 对象，并将其绑定到输入框上：
var inputBox = $('#input-box');
var magicSuggest = inputBox.magicSuggest({
data: ['red', 'blue', 'green', 'yellow']
});这样就可以创建一个具有自动完成功能的联想输入框了，用户在输入时会根据提供的数据进行匹配。
高级用法
Magicsuggest 还支持很多高级用法，例如支持异步数据源和多选等功能。
异步数据源
如果数据源比较庞大，我们可以考虑使用异步数据源来优化性能。Magicsuggest 支持通过 ajax 配置项来设置异步数据源：
-- -------------------- ---- -------
--- ------------ - -----------------------
----- ---
----------- -
---- --------------
--------- -------
------ ----
------- ------
-------- -------- ------ -
---------------------------
-
-
---这里的 url 是请求地址，params 是传递给服务器的参数名。当用户输入时，Magicsuggest 会发送一个带有参数的 AJAX 请求到服务器，在成功获取数据后，调用 success 函数将数据设置到 Magicsuggest 中。
多选
如果需要让用户进行多选操作，可以通过 maxSelection 和 maxSelectionRenderer 配置项来实现：
var magicSuggest = inputBox.magicSuggest({
maxSelection: 2,
maxSelectionRenderer: function () {
return '最多选择 2 个';
}
});这里设置了最多只能选择两项，并定义了一个提示函数，当用户尝试选择第三项时，会弹出提示框提示用户已达到最大选择数量。
总结
Magicsuggest 是一个非常实用的 jQuery 插件，可以轻松地为输入框添加自动完成和联想功能。同时，它还支持异步数据源和多选等高级用法，是前端开发中不可缺少的工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35100