サジェスト+Ajaxでタグがスムーズに入力できるjQueryプラグイン「Tag-it!」

ダウンロード

「Tag-it!」は下記URLからダウンロードしてください。
また、別途 jQuery と jQuery UI が必要です。

jQuery Tag-it!

プラグインをダウンロードしたらheadなどで読み込みましょう。
下記では jQuery などのライブラリは Google CDN で読み込んでます。

html

	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
	<link rel="stylesheet" type="text/css" href="jquery.tagit.css">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
	<script type="text/javascript" src="tag-it.min.js" type="text/javascript"></script>
	

使い方

最初にテキスト入力フォームを用意します。

html

	<form>
	  <input type="text" value="Tag1,Tag2" name="tags" id="tag-input">
	</form>
	

jQueryの方はとりあえずタグ入力しただけならこれだけです。

JavaScript

	<script type="text/javascript">
	$(function() {
		$('#tag-input').tagit();
	});
	</script>
	

簡単ですね。

バックスペースで削除する前に選択する

入力したタグは「x」ボタンを押す以外にもバックスペースでも簡単に削除できるのですが、一回で消えると不便という場合に最初にバックスペースで削除するタグを選択して、もう一度バックスペースを押すと削除するようにできます。

JavaScript

	$('#tag-input').tagit({
		removeConfirmation: true
	});
	

サジェスト機能を利用する

あらかじめ決められたキーワードをサジェストするなら、配列を用意して「availableTags」オプションに指定するだけです。
日本語も問題ないようです。

JavaScript

	var tagList = ["こんにちは", "こんばんは","今晩は","春夏秋冬","寒いですね"];
	$('#tag-input').tagit({
		removeConfirmation: true,
		availableTags: tagList
	});
	

Ajaxでキーワードを取得してサジェストする

さきほど設定したようなキーワード配列を吐き出すようなjsonファイルを用意します。

tag.json

	 ["こんにちは", "こんばんは","今晩は","春夏秋冬","寒いですね"]
	

あとは「$.ajax」でこのファイルを読み込んでから「success」に「tagit」を指定するればいけるはずです。

JavaScript

	$.ajax({
		url: 'tag.json',
		dataType: 'json',
		success: function (data) {
			$('#tag-input').tagit({
				availableTags: data
			})
		}
	});
	

入力したタグはリストタグに変換されますが、送信時に「,」区切りに直してくれるっぽいので後の処理は気にしなくてよさそうです。