jQuery Tags Input Plugin（添加/刪除標簽插件）詳解

更新時間：2016年06月20日 09:48:12 作者：沫魚

本文主要介紹jQuery Tags Input Plugin添加/刪除標簽插件的用法，非常實用，有需要的朋友可以參考一下。

看名字應該知道是干嘛用了吧。

一個jquery開發(fā)的標簽功能加強插件，可以生成或刪除標簽，還能對輸入重復標簽進行檢查，和JQuery autocomplete插件配合實現(xiàn)自動完成功能。

官網(wǎng)：http://xoxco.com/projects/code/tagsinput/

截圖：

(下面是翻譯了官網(wǎng)上的用法，英文不是很好，有能力的盡量看官網(wǎng)吧)

首先，引用下面兩個文件

<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />

在你的表單里創(chuàng)建一個包含tags列表的input輸入框，你可以在value里設置默認或目前有的tags，并用逗號隔開。

<input name="tags" id="tags" value="foo,bar,baz" />

然后，簡單地給任何一個輸入標簽調(diào)用tagsInput()函數(shù)，它便會被當作一個tags列表處理

$('#tags').tagsInput();

如果你想使用jQuery.autocomalete（自動完成插件）配合使用，那么在函數(shù)里增加一個帶autocomplete url的參數(shù)。

$('#tags').tagsInput({
 autocomplete_url:'http://myserver.com/api/autocomplete'
});

如果你使用了bassistance.de這個網(wǎng)站上的jQuery.autocomplete插件，還可以增加額外的參數(shù)來加強autocomplete插件，就像下面描述的這樣。

$('#tags').tagsInput({ 
 autocomplete_url:'http://myserver.com/api/autocomplete',
 autocomplete:{selectFirst:true,width:'100px',autoFill:true}
});

PS：需要注意的是，demo里默認用的是jquery ui autocomplete，如果你想要測試jquery.autocomplete，要把頭部被注釋掉的引用文件去掉注釋，并將$('#tags').tagsInput({})中autocomplete_url的地址改為相應的jquery.autocomplete的文件。具體看頁面上有說明。

你還可以使用addTag() and removeTag()函數(shù)增加和刪除掉標簽，如以下：

$('#tags').addTag('foo');
$('#tags').removeTag('bar');

你還可以用imporTags()方法導進一組tag列表，需要注意的是這樣會將value里設置的默認tag替換掉

$('#tags').importTags('foo,bar,baz');

所以如果importTags()里不帶值的話，就是重置input里的標簽值（注意引號要保留，可以理解為給它傳空值。）

$('#tags').importTags('');

可以使用tagExist()判斷一個標簽是否存在：

if ($('#tags').tagExist('foo')) { ... }

如果想要在增加或移除掉標簽的時候增加額外的功能或觸發(fā)其它動作，你可以通過onAddTag和onRemoveTag這兩個參數(shù)里指定回調(diào)函。這兩個函數(shù)都返回了一個標簽值作為參數(shù)(原文： Both functions should accept a single tag as the parameter.)

$('#tags_1').tagsInput({
 width:'auto',
 onAddTag:function(tag){
  console.log('增加了'+tag)
 },
 onRemoveTag:function(tag){
  console.log('刪除了'+tag)
 }
});

如果你想禁止增加標簽，或者你想提供其它交互方式增加標簽，可以增加一個值為false的interactive參數(shù)，這樣就禁止了增加標簽，而其它的功能和呈現(xiàn)都跟原來一樣。

$('#tags_1').tagsInput({
 width:'auto',
 onRemoveTag:function(tag){
  console.log('remover'+'"'+tag+'"')
 },
 interactive:false
});

如果你想要在每次增加/刪除一個標簽的時候調(diào)用一個函數(shù)，可以增加onChange的參數(shù)，并設置回調(diào)函數(shù)

默認情況下，如果鼠標位于一個標簽后面，按退格鍵會刪除掉那個標簽。如果你想禁止這個，設置removeWithBackspace參數(shù)為false即可。

參數(shù)：

$(selector).tagsInput({
 'autocomplete_url': url_to_autocomplete_api, //自動完成插件的文件地址，demo里有說明
 'autocomplete': { option: value, option: value}, //自動完成插件的參數(shù)，demo有說明。（提供個jquery.autocomplete的：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/）
 'height':'100px', //設置高度
 'width':'300px', //設置寬度
 'interactive':true, //是否允許添加標簽，false為阻止
 'defaultText':'add a tag', //默認文字
 'onAddTag':callback_function, //增加標簽的回調(diào)函數(shù)
 'onRemoveTag':callback_function, //刪除標簽的回調(diào)函數(shù)
 'onChange' : callback_function, //改變一個標簽時的回調(diào)函數(shù)
 'removeWithBackspace' : true, //是否允許使用退格鍵刪除前面的標簽，false為阻止
 'minChars' : 0, //每個標簽的小最字符
 'maxChars' : 0 //每個標簽的最大字符，如果不設置或者為0，就是無限大
 'placeholderColor' : '#666666' //設置defaultText的顏色
});

以上就是本文的全部內(nèi)容，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: