友好的jQuery UI版多標籤字段選擇庫：tag-it

我們知道select標籤想要支持多選，加一個屬性：multiple，可以界面太難看，多選的話，還需要按著shift或者ctrl鍵，這樣老麻煩了，有沒有更好的選擇方式？ 我們來看下圖：

一個是select，一個是美化的select

通過比較，我們果斷選擇後者。那麼怎麼實現呢？這裡推薦一個jQuery UI插件：tag-it.js

那麼什麼事tag-it.js呢？

它是一個簡單的，並可配置自動支持多標籤的字段編輯。它可以自動完成選擇（autocomplete），自動推薦選項（suggestions）。

那麼它的兼容性如何？

首先它是jQuery的插件，自然需要：jQuery 1.4+、jQuery UI 1.8+。現代瀏覽器都支持（IE6+）。

那麼如何使用它呢？

使用tag-it的方法步驟

看了上圖，是不是很好應用，它通過dom元素來美化成select選擇的方式。

上邊我們說到，tag-it插件，可以配置，那麼它都有哪些主要的配置呢？

一：你可以通過 filename(string)來指定字段名，方便傳給後臺（php、java）來接收處理。

二：可以通過 availableTags(array)來初始化自動完成的數據源。比如：availableTags:["選項1","選項2"]。

三：autocomplete自動完成，配置延遲，提示的選項個數。

四：tagLimit 限制選擇的個數。

配置有很多，這裡就不一一列舉了。如果你的項目中還在用select選擇，要不要嘗試一下這個tag-it，會不會馬上提升檔次，嘻嘻……

圖片來自網絡

每天進步一點點，日積月累，就會看到成果，如果你喜歡，那就收藏、點贊、評論、轉發吧。