Skip to content

Tagify 標籤插件介紹

Last updated on 2021 年 6 月 29 日

最近在製作公司的小工具的時候,要做到『貼標籤』的功能,找了幾款可以用的套件,用一用覺得 Tagify 最喜歡,所以紀錄一下!

GitHub: https://yaireo.github.io/tagify/

Tagify 是一個前端組件,主要用在前後端分離的應用,也有基於 jQuery 的實現。

首先在頁面內引入 jQuery.tagify.min.js 文件

<script src="https://github.com/yairEO/tagify/blob/master/dist/jQuery.tagify.min.js"></script>

接著要用一個 HTML <input> Tag 讓使用者可以輸入和看到標籤

<input name='basic' value='tag1, tag2'>

然後寫點 JavaScript

// 您希望 Tagify 替換的 DOM 元素
var input = document.querySelector('input[name=basic]');

// 在 input 初始化 Tagify
new Tagify(input)

如此一來就完成一個很精美好用的『貼標籤』,至於後端要怎麼去儲存,又是另一個事情了。

Published in筆記

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *