jQuery UI逆引きリファレンス
AutoCompleteウィジェットで候補リストをサーバーサイドから取得するには？
AutoCompleteウィジェットの候補リストをサーバーサイドで管理し、Ajax経由でそのリストを取得する方法を解説。
jQuery UIとは？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
別稿「AutoCompleteウィジェットでオートコンプリート機能付きのテキストボックスを生成するには？」「AutoCompleteウィジェットの検索／表示方法をカスタマイズするには？」では、候補リストをJavaScriptコード（クライアントサイド）で準備する方法について解説しました。JavaScriptコードでの管理は手軽さというメリットがありますが、半面、大量のリストを管理するには不向きです。そのようなケースでは、候補リストはサーバーサイドで管理し、AutoCompleteウィジェットからはAjax経由でリストを取得することもできます。
以下に、具体的な例を示します。なお、本稿ではサーバーサイドの仕組みとしてRuby on Railsを利用していますが、後述する条件さえ満たしていれば、利用する技術は何でも構いません。
1. データベースを準備する
まず、サーバーサイドで任意のRDBMS（MySQLやPostgreSQLなど）に任意のデータベースを作成し、候補リストを管理するためのテーブルとして、以下のようなkeywordsテーブルを準備します。
| フィールド名 | データ型 | 概要 |
|---|---|---|
| id | INT | id値（主キー） |
| value | VARCHAR(255) | キーワード |
2. 候補リストを生成するためのアクションを準備する
AutoCompleteウィジェットからの要求に応じて、候補リストを生成するためのアクション（＝リクエストを処理するメソッド）を用意します。
|
class RecordController < ApplicationController
def autocomplete
# keywordsテーブルを入力値で前方一致検索。結果をJSON形式で出力
render json: Keyword.where('value LIKE ?', params[:term] + '%').
select('value, value || "メソッド" AS label').to_json
end
end
|
冒頭で述べたように、サーバーサイドで利用できる技術に特に制限はありません。ただし、以下の条件に従って、実装しなければなりません。
（1）クエリ情報termで入力値を受け取る
上の例であれば、「params[:term]」で入力値を受け取り、keywordsテーブルに対して前方一致検索を実行しています。ちなみに、上のコードでは、内部的に以下のようなSELECT命令が実行されています。
|
SELECT value, value || "メソッド" AS label FROM "keywords" WHERE (value LIKE 'as%')
|
（2）JSON形式で結果を出力する
具体的には、以下のようなハッシュ配列を生成しなければなりません。前掲の別稿でも触れたように、labelキーは候補リストに表示するテキストを、valueキーはテキストボックスに反映するテキストを、それぞれ表します。
|
[
{"value":"assert_equal","label":"assert_equalメソッド"},
{"value":"assert_difference","label":"assert_differenceメソッド"}
{"value":"assert_no_difference","label":"assert_no_differenceメソッド"},
{"value":"assert_blank","label":"assert_blankメソッド"}
]
|
3. クライアントサイド・ページを用意する
最後に、サーバーサイドに対して候補リストを要求するよう、AutoCompleteウィジェットを用意します。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AutoCompleteウィジェット</title>
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$('#txtKeywd').autocomplete({
source: 'record/autocomplete',
autoFocus: true,
delay: 500,
minLength: 2
});
});
</script>
</head>
<body>
<label for="txtKeywd">キーワード</label>：
<input id="txtKeywd" type="search" size="20" maxlengh="50" />
</body>
</html>
|
サーバーサイドと連携するうえでのポイントは一点、太字の部分です。sourceパラメーターに対して、サーバーサイドのパス（ここでは「record/autocomplete」という相対URL）を指定するだけです。これによって、minLength／delayパラメーターの条件を満たしたタイミングで、Ajax要求が発生し、サーバーサイドから候補リストを取得することができます。
※以下では、本稿の前後を合わせて5回分（第17回～第21回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
17. AutoCompleteウィジェットでオートコンプリート機能付きのテキストボックスを生成するには？
テキストボックスに最初の何文字かを入力すると、それにマッチする候補リストを表示するオートコンプリート機能を実現できる、AutoCompleteウィジェットの基本的な実装方法を紹介。
18. AutoCompleteウィジェットの検索／表示方法をカスタマイズするには？
AutoCompleteウィジェットのイベントやメソッドを利用しながら、候補リストの検索／選択時の処理をカスタマイズする方法について説明。
19. 【現在、表示中】≫ AutoCompleteウィジェットで候補リストをサーバーサイドから取得するには？
AutoCompleteウィジェットの候補リストをサーバーサイドで管理し、Ajax経由でそのリストを取得する方法を解説。
20. Selectableウィジェットで選択可能なリストを作成するには？
マウス・クリックによる単一選択や、マウス・ドラッグによる範囲選択などが実現できるSelectableウィジェットの基本的な使い方を解説。
21. Draggable／Droppableウィジェットでドラッグ＆ドロップ機能を実装するには？
ページ上の指定された要素をマウスでドラッグ＆ドロップできるようにするDraggable／Droppableウィジェットの基本的な使い方を解説。
