#tag入力とは
Qiitaの記事を書いたことある方ならご存知だと思いますが、
以下の写真のように、入力したワードがタグ形式に表示され、設定したワードに関しては、
自動補完する候補を出してくれます。
(Lと打つと、Linux,laravel,lambda,ect...と出てきています)
#tag入力プラグイン
今回は、JQueryのプラグインのtag-itを使いました。
調べてみるとtag入力のプラグインだけでも何種類かあって、それぞれメリット・デメリットがあるそうです。
http://d.hatena.ne.jp/a_kimura/20120712/1342097317
#使い方
前提として、こんなディレクトリ構造です。
- tagitSample
- sample.html
- js
- tag-it.min.js
- css
- query.tagit.css
手順をザザっと書くとこんな感じです。
①htmlファイルのheadに以下を入れる
-
js
- jquery.min.js
- jquery-ui.min.js
- tag-it.min.js
-
css
- jquery-ui.css
- jquery.tagit.css
②htmlファイルのbodyにtag入力するエリアを作成する
③JQueryのイベントを設定する。
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
// ①htmlファイルのheadに以下を入れる
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.tagit.css">
<script type="text/javascript" src="js/tag-it.min.js"></script>
//③JQueryのイベントを設定する。
<script type="text/javascript">
$(document).ready(
function(){
$("#myTags").tagit({
singleField: true,
//自動補完するワードを設定
availableTags: ['php', 'ruby', 'react', 'reactNative', 'laravel']
});
});
</script>
</head>
<body>
<h1>tag-it sample</h1>
//②htmlファイルのbodyにtag入力するエリアを作成する
<div class="search-area-colum form-contents">
<ul id="myTags" value="tags" name ="tags"></ul>
</div>
</body>
#####上記のコードを動かすと.....
殺風景ですが、ちゃんと自動補完機能も動いて、タグ入力ができていますね！
簡単簡単！！
$("#myTags").tagit({
singleField: true,
//自動補完するワードを設定
availableTags: ['php', 'ruby', 'react', 'reactNative', 'laravel']
});
↑で自動補完設定した[ruby', 'react', 'reactNative']が自動補完されています。
配列であれば、availableTags: に渡すことができるので、データベースから取ってきた値を渡してあげることもできます。私も実際の開発では、データベースにあるマスターデータから、自動保管するワード持ってきています。
##補足
jqueryのバージョンが3.2.1だと動かないので、
3.2.1を使いたい場合は、
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
を追加してください。