タグを設定する入力項目を作成 - 「Bootstrap Tags Input」

タグの入力項目

• 情報に「タグ」を付けて管理するというユーザインタフェースが増えてきたように思います
• ただ、このタグ付けのUIを自分でいちから実装するのは、けっこう大変です
• そこで、今回紹介するのが、「Bootstrap Tags Input」です

Bootstrap Tags Input

• タグのインタフェースを簡単に組み込めます
• その名の通り、Bootstrapを利用したUIに最適になっています
• スクリーンショット（下）のような入力項目を提供できます

• プロジェクトのウェプサイト（サンプル動作を確認できます）

Bootstrap Tags Input

ライブラリの取得

• bower で取得します

bootstrap-tagsinput": "0.4.2"

bower install

ライブラリの利用の指定

• bowerで取得したライブラリを読み込みます

<link rel="stylesheet" href="bower/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" />
<script type="text/javascript" src="bower/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>

タグの入力項目の作成

• テキスト入力のタグに、data-role="tagsinput"を追記するだけで、タグの入力項目になります

 :
<input type="text" class="form-control" name="tags" id="input_tags" placeholder="Tags" data-role="tagsinput" value="tag1 tag2" />
 :

簡単に組み込めますので、ご参考までに。