原文地址:https://fly.layui.com/extend/inputTags/#doc

实现效果

更新内容：

添加组件添加 删除 最新数据回调 在 配置数据的 all方法里面监听

将 css 样式 id 样式全部改为类样式  实现可以同时注册多个inputTag

【如何使用】

layuiadmin中使用 在引入框架时配置模块的目录  存放在  layuiadmin\lib 目录

<script>
layui.config({
base: '{LAYUI_BASE_PATH}' //静态资源所在路径
}).extend({
index: 'lib/index', //主入口模块
selectY: 'lib/selectY/selectY',
treeTable: 'lib/treeTable/treeTable',
inputTags: 'lib/inputTags/inputTags',
});
/^http(s*):\/\//.test(location.href) || alert('请先部署到 localhost 下再访问');
</script>

模块引入

HTML 代码  input id 可自定义

<div class="layui-form-item">
  <label class="layui-form-label">关键字:</label>
  <div class="layui-input-block tags"  >
<input type="text" name="keywords"   id="tag1" class="layui-input inputTags" autocomplete="off" >
  </div>
</div>

JS 代码

layui.use(['form', 'layer', 'inputTags'], function() {
    $ = layui.$, form = layui.form;
    layer = layui.layer;
    var inputTags = layui.inputTags;
    if (old_labels != "") {
        old_labels = old_labels.split(",");
    } else {
        old_labels = [];
    }
    inputTags.render({
        elem: '#tag1',
        content: old_labels,
        aldaBtn: false,
        done: function(value) {
            //新增一个回调
            console.log(value)
        },
        all: function(data) {
          // 删除 新增 都会回调最新全部数据
            console.log(data);
            this.labels = data;
        }
    });
});