タグ付け機能をtag-it.jsを使って導入する

はじめに

タグ付けの機能がほしいと思いググると、便利なjqueryプラグインがありました。

github (Tag-it)

導入方法

ダウンロードして、jsとcssをコピー(jsはminがついている方だけで大丈夫です。)

・埋め込むjs
jquery.min.js
jquery-ui.min.js
tag-it.min.js

・埋め込むcss
jquery-ui.css
jquery.tagit.css

・表示したい箇所にulタグを追加し、tagitを呼び出せば完成

sample

<ul id="myTags">
</ul>

<script type="text/javascript">
    $(document).ready(function() {
        $("#myTags").tagit();
    });
</script>

困った点

jqueryのバージョンが3.2.1を使用してると、コンソールエラーが出て動作しませんでした。
https://code.jquery.com/jquery-migrate-3.0.0.min.js
を追加すると、問題なく動作しました。

そのほかの使い方

・タグ付けして投稿→登録済みのタグを表示したい場合

sample

<ul id="myTags">
    <li>前回登録したタグ1</li>
    <li>前回登録したタグ2</li>
</ul>

・登録できるタグに上限を持たせたい場合

sample

$(document).ready(function() {
    $('#myTags').tagit({tagLimit:5});
});