drodata 2019-07-06 15:55:11 123次浏览 2条回复 0 1 0

选型

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

bootstrap.png

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

select2.png

最后找到 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.png

配置及注意事项

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

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

觉得很赞
亿速云
您需要登录后才可以回复。登录 | 立即注册