jQuery TagsInput

Amare丶發表於2017-06-08
jQuery

jQuery TagsInput Plugin（新增/刪除標籤外掛）

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

一個jquery開發的標籤功能加強外掛，可以生成或刪除標籤，還能對輸入重複標籤進行檢查，和JQueryautocomplete外掛配合實現自動完成功能。

 官網：http://xoxco.com/projects/code/tagsinput/

截圖：

(下面是翻譯了官網上的用法，英文不是很好，有能力的儘量看官網咖)

首先，引用下面兩個檔案

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

在你的表單裡建立一個包含tags列表的input輸入框，你可以在value裡設定預設或目前有的tags，並用逗號隔開。

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

然後，簡單地給任何一個輸入標籤呼叫tagsInput()函式，它便會被當作一個tags列表處理

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

如果你想使用jQuery.autocomalete（自動完成外掛）配合使用，那麼在函式裡增加一個帶autocompleteurl的引數。

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

如果你使用了bassistance.de這個網站上的jQuery.autocomplete外掛，還可以增加額外的引數來加強autocomplete外掛，就像下面描述的這樣。

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

PS：需要注意的是，demo裡預設用的是jquery uiautocomplete，如果你想要測試jquery.autocomplete，要把頭部被註釋掉的引用檔案去掉註釋，並將$('#tags').tagsInput({})中autocomplete_url的地址改為相應的jquery.autocomplete的檔案。具體看頁面上有說明。

你還可以使用addTag() andremoveTag()函式增加和刪除掉標籤，如以下：

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

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

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

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

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

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

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

如果想要在增加或移除掉標籤的時候增加額外的功能或觸發其它動作，你可以通過onAddTag和onRemoveTag這兩個引數裡指定回撥函。這兩個函式都返回了一個標籤值作為引數(原文： Bothfunctions 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引數，這樣就禁止了增加標籤，而其它的功能和呈現都跟原來一樣。

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

如果你想要在每次增加/刪除一個標籤的時候呼叫一個函式，可以增加onChange的引數，並設定回撥函式

預設情況下，如果滑鼠位於一個標籤後面，按退格鍵會刪除掉那個標籤。如果你想禁止這個，設定removeWithBackspace引數為false即可。

引數：

複製程式碼
$(selector).tagsInput({
   'autocomplete_url': url_to_autocomplete_api, //自動完成外掛的檔案地址，demo裡有說明
   'autocomplete': { option: value, option: value}, //自動完成外掛的引數，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, //增加標籤的回撥函式
   'onRemoveTag':callback_function, //刪除標籤的回撥函式
   'onChange' : callback_function, //改變一個標籤時的回撥函式
   'removeWithBackspace' : true, //是否允許使用退格鍵刪除前面的標籤，false為阻止
   'minChars' : 0, //每個標籤的小最字元
   'maxChars' : 0 //每個標籤的最大字元，如果不設定或者為0，就是無限大
   'placeholderColor' : '#666666' //設定defaultText的顏色
});
複製程式碼

相關文章