非jQuery依存のタギングしてくれるJavaScriptライブラリTaggle.js

JavaScriptでタギングを実装する場合、今まで、jQuery Tags Inputを使っていました。

xoxco.com

上のプラグインも便利なのですが、一点だけ欠点があり、それは、jQuery依存ということ。

jQueryに依存しない独立したプラグインを探したところTaggle.jsというのを発見。

sean.is

まずは、npmを使ってプログラムをインストール。

npm install taggle --save

初期化をする前にまずはプログラムをインクルード。

var Taggle = require("taggle");

次に、第一引数にid属性の値を設定。

<div id="hoge"></div>
<script>
var Taggle = require("taggle");
new Taggle('hoge');

</script>

ついでにCSSも追加する必要がありそうです。

taggle.js/minimal.css at master · okcoker/taggle.js · GitHub

<link rel="stylesheet" href="./minimal.css">

初期値を設定したい場合は、初期化するタイミングで第二引数にtagsパラメータを設定すればいけそうです。

<div id="hoge"></div>
<script>
var Taggle = require("taggle");
new Taggle('hoge',{
  tags:['#foo','#bar']
});

</script>

デフォルトでは、小文字、大文字を区別しないので、厳密に、小文字と大文字を区別したい場合は、preserveCaseパラメータをtrueにすればよさそうです。

<div id="hoge"></div>
<script>
var Taggle = require("taggle");
new Taggle('hoge',{
  preserveCase: true
});

</script>

またデフォルトでプレースホルダーが表示されてしまっているので、何も表示させたくない場合、または、文言を変更したい場合は、placeholderパラメータを設定すれば変更できそうです。

<div id="hoge"></div>
<script>
var Taggle = require("taggle");
new Taggle('hoge',{
  placeholder: 'please input tags.'
});

</script>

<div id="hoge"></div>
<script>
var Taggle = require("taggle");
new Taggle('hoge',{
  placeholder: ''
});

</script>

便利なことに、入力できるタグ数もmaxTagsというパラメータで設定することができる。

<div id="hoge"></div>
<script>
var Taggle = require("taggle");
new Taggle('hoge',{
  maxTags: 10
});

</script>

任意のタイミングでタグを追加したい場合は、addメソッドを呼び出せば削除することができる。

<div id="hoge"></div>
<script>
var Taggle = require("taggle");
var taggle = new Taggle('hoge');
taggle.add('foo');
</script>

タグが追加される前に、そのの内容を確認し、追加するか、または、追加しないかを判断したい場合は、onBeforeTagAddメソッドで確認することができる。 onBeforeTagAddメソッドが呼ばれた時に、第二引数に入力されたタグが文字列として渡される。 入力されたタグを追加したくない場合は、returnでfalseを返せば設定されない。

<div id="hoge"></div>
<script>
var Taggle = require("taggle");
var taggle = new Taggle('hoge',{
  onBeforeTagAdd:function(event, tag){
    if(tag === '#bar'){
      return false;
    }
  }
});
</script>

他にも色々な機能があるので、また、使う際に確認していきたい。