AutoComplete
AutoCompleteは、テキストボックスに検索キーワードを入力すると、関連キーワードを下に表示できるウィジェットです。Google検索などで、単語を入力すると下に候補一覧が表示されるイメージです。Autocompleteウィジェットは、jQuery UI 1.8で追加されました。jQuery UIでこの機能を使用するには、一覧表示させたい単語をサーバアクセスによるJSON形式で受け取るか、JavaScriptの配列を準備しておきます。ここでは、配列を用いた例を取り上げます。
リスト3にjQueryUI_AutoCompleteの使用例を、図4に実行結果を示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>オートコンプリートサンプル</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
var Tags = ["aomori-ken", "akita-ken", "iwate-ken", "miyagi-ken", "yamagata-ken", "hukusima-ken"];
$("#tags").autocomplete({
source: Tags
});
});
</script>
</head>
<body>
<label for="tags">東北六県: </label>
<input id="tags"/>
</body>
</html>
リスト3では、東北六県が候補一覧に表示されるように設定しています。例えば、テキストボックスに「a」と入力すると、用意した配列の中で「a」が入っている単語（ここでは、aomori-ken、akita-ken、iwate-ken、miyagi-ken、yamagata-ken、hukusima-ken）が表示されています。autocompleteメソッドを使用し、表示させたい配列をsourceで指定します。
表4にautocompleteのオプションを示します。
| オプション | 説明 |
| disabled | ウィジェットを無効にする（true／false） |
| delay | キーワード入力後からリスト表示が開始されるまでの時間を指定する（1秒間を1000で表示） |
| minLength | リスト表示に必要な文字数を指定する（正の整数） |
| source | リスト表示する文字列、配列、関数のいずれかを指定する（必須） |
サーバアクセスによるJSON形式で受け取りたい場合は、サーバ側でJSON形式でJavaScript配列を返すプログラム（ここでは例えばjson.php）を作成し、リスト4のように指定します。$.getJSON()メソッドでは、第1引数で読み込むページのURLの指定し、第2引数でキーと値の組み合わせを、第3引数で通信成功時のコールバック関数を指定します。
JSON形式を利用する場合は、専用の$.getJSON()メソッドを使用可能で、$.ajax()を利用するよりも簡単に取り扱うことができます。また、データによっては、変数で指定したデータをHTMLのScriptタグで読み込んで利用することも可能です。
$("#tags").autocomplete({
source: function(request, response) {
$.getJSON("json.php", {
term: extractLast(request.term)
}, response);
}
