前端开发人员都知道，使用现成的工具和库可以大大提高开发效率。其中，npm 是一个非常重要的 web 包管理器，可以方便开发人员搜索并安装需要的包，以及对其进行管理和升级。而其中一个十分实用的 npm 包就是 recruit-tag-input，用于创建许多现代化网站需要的标签输入框。在本篇文章中，我们将为大家介绍如何使用这个 npm 包，帮助你快速构建一个支持多标签输入的 Web 应用！
什么是 recruit-tag-input
recruit-tag-input 是一个基于 jQuery 和 CSS 的 npm 包，用于创建具有自动完成功能的标签输入框。它能够很好地处理多个标签的输入和操作，并提供许多配置项和回调事件，方便我们自定义输入框的功能和样式。
如何安装
使用 recruit-tag-input 很简单，只需要在命令行中运行以下命令即可：
npm install recruit-tag-input
如何使用
接下来，我们来看看如何使用 recruit-tag-input 创建一个标签输入框：
1. 加载脚本和样式
我们首先需要把 recruit-tag-input 的脚本和样式引入到我们的网页中。我们可以在 HTML 文件中添加以下两个标签：
<link rel="stylesheet" href="node_modules/recruit-tag-input/dist/jquery.recruit-tag.min.css"> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/recruit-tag-input/dist/jquery.recruit-tag.min.js"></script>
其中第一个是 recruit-tag-input 的样式文件，第二个和第三个是 jQuery 和 recruit-tag-input 的脚本文件，即使你正在使用其他的 JS 框架，仍然需要添加 jQuery。
2. 创建标签输入框
在 HTML 文件中创建一个带有 id 属性的输入框：
<input type="text" id="tag-input">
3. 初始化插件
我们需要在 JavaScript 文件中初始化插件，以将标签输入框转换为具有自动完成功能的标签输入框：
$(function() {
$('#tag-input').recruitTag();
});这样，recruit-tag-input 就可以工作了！
但是，以上代码还不足以让 recruit-tag-input 正常工作，可以是需要根据不同的需求进行一些配置，下面是常用的几个选项:
-- -------------------- ---- -------
------------------------
------------ -------- -- -----
------------ ---- ---- ---- -- ---------
--------- ------ -- ----
----------- ---- -- ---------
----------- ----------------- - -- ----------
---------------- ------------ ------
--
------------- ----------------- - -- ----------
------------------- ------------ ------
-
---我们可以通过这些选项来自定义标签输入框的功能和样式。
4. 获取输入的标签
我们可以通过以下代码获取输入框中的标签：
var tags = $('#tag-input').recruitTag('getTags');这个方法返回一个包含所有标签的数组，可以用于后续的操作。
示例代码
最后，给大家提供一个完整的例子，演示如何使用 recruit-tag-input 来构建一个标签输入框。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- --- ----- ------------
----- ---------------- ----------------------------------------------------------------------
------- ------------------------------------------------------
------- -----------------------------------------------------------------------------
--------
------------ -
----------------------------
------------ --------
------------ ---- ---- ----
--------- ------
----------- ----
----------- ----------------- -
---------------- ------------ ------
--
------------- ----------------- -
------------------- ------------ ------
-
---
------------------------------- -
--- ---- - --------------------------------------
------------------
---
---
---------
-------
------
------ ----------- ---------------
------- ---------------------------
-------
-------当你打开这个 HTML 文件时，你会看到一个带有自动完成功能的标签输入框和一个按钮，点击这个按钮将可以在浏览器控制台中看到输入的标签。够多试试吧！
总结
在本文中，我们介绍了 npm 包 recruit-tag-input 的用法和功能，并提供了一个完整的示例代码。通过使用这个插件，我们可以快速构建一个现代化的标签输入框，非常适合用于许多 Web 应用程序中。如果你喜欢这个插件，记得在 npm 上给它点赞哦！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/recruit-the-tag-input