2008年9月25日木曜日

jQuery Autocomplete: 入力値をAjaxで補完するjQueryプラグイン


フォームに文字の一部を入力するとマッチする結果をAjaxで返してくれるオートコンプリート。
例えば、appleのホームページの検索ボックスは、"ip" と入力するとiphoneやipodを自動で表示してくれます。

jQuery Autocompleteはオートコンプリート機能を手軽に実装できるjQueryのプラグインです。

jQuery Autocomplete Mod
(http://www.pengoworks.com)

使い方はいたってシンプルです。
まずはjQuery Autocompleteからjavascriptファイルとcssファイルをダウンロード。

<script type="text/javascript" src="/javascripts/jquery.autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="/stylesheets/jquery.autocomplete.css" />
パスは自分の環境に合わせてください


id_name というidを持つinput要素にjQuery Autocompleteを適用します。(もちろんid名はなんでもかまいません)
<input type="text" name="name" value="" id="id_name" />

<script type="text/javascript">
$(document).ready(function(){
$('#id_name').autocomplete('autocomplete_ajax.php');
});
</script>

オートコンプリートはAjaxで通信しますので、サーバー側で検索処理などを行うスクリプトを置いておく必要があります。(上の例では autocomplete_ajax.php)

では、jQuery Autocompleteは具体的にどうやって通信しているのでしょうか?

Ajax云々の処理は、プラグインが内部的にやってくれるので特に気にする必要はありません。

例えば、id_nameというフィールドが国名を期待するものであるなら、
"A" と一文字入力すると Afghanistan, Argentina, Australia などの国名のリストをサーバーが返してくるようにスクリプトを書くだけです。

"A"が入力されると...

クライアント -> サーバー
autocomplete_ajax.php?q=A というリクエストが送信されます

サーバー
qというキーを持つGETパラメータを利用して、データベースなどから目的のリストを取得します。
取得したリストを\n区切りにしてクライアントに返します。
Afghanistan\nArgentina\nAustralia...

あとはjQuery Autocompleteが\n区切りを解析してULタグの中に放り込んでくれます。



jQuery Autocompleteは第2引数でオプションを指定することができます。
くわしくはドキュメントを参照してください。

ここでは jQuery Autocompleteのデモを参考に、コールバック関係のオプションのサンプルをまとめておきます。
<script type="text/javascript">
function findValue(li) {
if( li == null ) return alert("No match!");

// if coming from an AJAX call, let's use the CityId as the value
if( !!li.extra ) var sValue = li.extra[0];

// otherwise, let's just display the value in the text box
else var sValue = li.selectValue;

alert("The value you selected was: " + sValue);
}

function selectItem(li) {
findValue(li);
}

function formatItem(row) {
return row[0] + " (id: " + row[1] + ")";
}

$(document).ready(function(){
$('#id_name').autocomplete('autocomplete_ajax.php', {
onItemSelect : selectItem,
onFindValue : findValue,
formatItem : formatItem
});
});
</script>

0 件のコメント: