[jQuery]tagを付与してくれるtagsInputプラグイン

タグを自動で実装してくれるtagsInputプラグインというものを同僚から教えてもらったので、使い方の勉強。

使い方は超簡単。

<link href="./jquery.tagsinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./jquery.tagsinput.min.js"></script>

上記のscriptとstyleをインクルード。

HTMLは、下記の1行。

<input name="tags" id="tags" value="" />

init時のscriptは下のようにすればおｋ

jQuery(function($){
  var $tags = $('#tags');
  $tags.tagsInput({
    'onAddTag':function(e){
    },
    'onRemoveTag':function(e){
    },
    'onChange' : function(e){
    },
    'defaultText':'テキストを入力してください',
    'maxChars':20
  });
});

defaultText：パラメータでタグが入力されていないときの文言を設定
maxChars：1タグ当たりの最大文字数
onAddTag：tagが追加された時に呼び出されるコールバック関数
onRemoveTag：tagが削除された時に呼び出されるコールバック関数
onChange：tagに変化があった時に呼び出されるコールバック関数

ちなみに、

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

でtagを動的に追加したり、

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

で削除することができる。

ちなみに、上で動的に設定した場合も、コールバックは呼ばれるので注意したい。