前言
在前端开发中，标签输入框是一个经常使用的组件。但是在实现时存在一些不便，例如自动补全、自定义标签等等。为了解决这些问题，有一些第三方插件如cm-tags-input。
本文将详细介绍如何使用npm包cm-tags-input实现标签输入框。
安装
使用npm进行安装，命令如下：
npm install cm-tags-input
在HTML文档中引入cm-tags-input的CSS和JS文件，如下所示：
<head> <link rel="stylesheet" href="path/to/dist/cm-tags-input.css"> </head> <body> <!-- your content --> <script src="path/to/dist/cm-tags-input.js"></script> </body>
使用方法
HTML
在HTML中，需要一个容器元素（例如div）来包含标签输入框。在容器元素中添加一个<input>标签，并设置id。
<div id="tag-container"> <input type="text" id="tag-input" placeholder="请输入标签"> </div>
初始化
在JavaScript中，首先要初始化标签输入框，调用cmTagsInput.init()方法，并传入容器元素和配置对象。
const container = document.querySelector('#tag-container');
const input = document.querySelector('#tag-input');
cmTagsInput.init(container, {
// your configurations
});配置
在初始化时，可以通过配置对象传入一些参数，定制标签输入框的行为和外观。常用的配置项如下。
- items: 数组类型，表示已经输入的标签，可以在初始化时传入，也可以在
addItem()方法中动态添加。 - autocomplete: 布尔类型，表示是否开启自动补全功能，默认为false。
- autocompleteSource: 函数类型，自动补全功能的数据源。该函数接受一个字符串参数（当前输入的值），返回一个数组类型的数据（包含建议列表）。
- maxItems: 整数类型，表示允许添加的最大标签数目。
- maxChars: 整数类型，表示允许输入的最大字符数目。
- placeholder: 字符串类型，表示输入框的提示信息。
以下是一个使用配置项的例子。
-- -------------------- ---- -------
----- --------- - -----------------------------------------
----- ----- - -------------------------------------
--------------------------- -
------ --------- --------- ----------
------------- -----
------------------- --------------- -
-- ---- ---- -------- ------ ----
--
--------- --
--------- ---
------------ ----------------
---方法
在使用标签输入框的过程中，常常需要调用一些方法，例如添加标签、获取已输入的标签等等。cm-tags-input提供了一些工具方法，可以帮助我们实现这些功能。
1. addItem
addItem方法用于添加标签。该方法接受一个参数，表示要添加的标签内容。
cmTagsInput.addItem('apple');2. removeItem
removeItem方法用于删除指定标签。该方法接受一个参数，表示要删除的标签内容。
cmTagsInput.removeItem('apple');3. clear
clear方法用于清空所有已输入的标签。
cmTagsInput.clear();
4. getItemCount
getItemCount方法用于获取已输入标签的数目。
cmTagsInput.getItemCount(); // 2
5. getItems
getItems方法用于获取已输入的标签内容，返回一个数组。
cmTagsInput.getItems(); // ['apple', 'banana']
示例代码
下面是一个完整的示例代码，演示了如何使用cm-tags-input实现标签输入框。
-- -------------------- ---- -------
--------- -----
------
------
----------------------------
----- ---------------- --------------------------------------
-------
------
---- -------------------
------ ----------- -------------- --------------------
------
------- ---------------------------------------------
--------
----- --------- - -----------------------------------------
----- ----- - -------------------------------------
--------------------------- -
------ --------- --------- ----------
------------- -----
------------------- --------------- -
----- ------ - --------- --------- --------- ------- --------------
------ ------------------- -- -----------------------
--
--------- --
--------- ---
------------ ----------------
---
------------------------------ ---------- -
----- ----- - ------------------
-- ------ --- --- -
---------------------------
-
---------- - ---
---
---------
-------
-------总结
以上介绍了如何使用npm包cm-tags-input实现标签输入框，我们可以通过配置项和工具方法来实现不同的功能。希望读者能够从中受益，并且使用这种方法来提高自己的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554bd81e8991b448d1f33