打标签插件 Tagify 介绍 [ 技术分享 ]

选型

项目中有个客户主营产品，需要找一个打标签的插件。此类功能使用体验最合心意的网站是 Stackoverflow, 搜索时力求能找到类似的开源插件。首先搜到的是 Bootstrap Tags Input (https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/), 此插件默认使用 Bootstrap .label-* 类显示标签，显示出来字体太扁，输入中文效果更差（如下图）；

然后是 Select2 插件，它有个 tags 选项，可以将一个多选下拉菜单打造出“打标签”的效果，不但能选择已有的 options 值，也能输入全新的值。它的主要问题也是使用体验不好，光标一聚焦，下拉菜单备选项就显示出来；只能通过回车的方式选择某一个标签，不支持自定义分隔符。

最后找到 Tagify (https://yaireo.github.io/tagify/). 试用后体验很好。和前两个插件都基于 jQuery 不同，Tagify 是一个前端组件，主要用在前后端分离的应用，也有基于 jQuery 的实现。综合权衡后，最终选择 Tagify.

整合

首先在页面内引入 jQuery.tagify.min.js 文件 (https://github.com/yairEO/tagify/blob/master/dist/jQuery.tagify.min.js), 为方便引用，大家可以做一个 Asset.

然后在视图中放一个文本框：

<?= $form->field($common, 'main_product')->textInput([
    'placeholder' => '多个产品请用英文逗号隔开',
    'class' => 'tagify',
]) ?>

最后通过 $('.tagify').tagify() 激活插件即可。最终效果图如下：

配置及注意事项

Tagify 配置选项丰富，例如 'delimiters' 支持自定义分隔符，也支持根据关键词动态从服务器加载条目。在实际使用中，需要哪个功能了，再来研究哪个配置也不迟。

需要注意的是，此插件输入的内容提交的服务器后的格式是 JSON 转码的字符串，例如 '[{"value":"hello"},{"value":"world"}]' 因此在写入数据库前，需要进行预处理。