Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery UI逆引きリファレンス

jQuery UI逆引きリファレンス

AutoCompleteウィジェットで候補リストをサーバーサイドから取得するには?

2013年11月21日

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) キーワード
keywordsテーブルのフィールド・レイアウト

2. 候補リストを生成するためのアクションを準備する

 AutoCompleteウィジェットからの要求に応じて、候補リストを生成するためのアクション(=リクエストを処理するメソッド)を用意します。

Ruby
class RecordController < ApplicationController
  def autocomplete
    # keywordsテーブルを入力値で前方一致検索。結果をJSON形式で出力
    render json: Keyword.where('value LIKE ?', params[:term] + '%').
      select('value, value || "メソッド" AS label').to_json
  end
end
keywordsテーブルを入力値で検索するコード(record_controller.rb)

 冒頭で述べたように、サーバーサイドで利用できる技術に特に制限はありません。ただし、以下の条件に従って、実装しなければなりません。

(1)クエリ情報termで入力値を受け取る

 上の例であれば、「params[:term]」で入力値を受け取り、keywordsテーブルに対して前方一致検索を実行しています。ちなみに、上のコードでは、内部的に以下のようなSELECT命令が実行されています。

SQL
SELECT value, value || "メソッド" AS label FROM "keywords" WHERE (value LIKE 'as%')
上記のコードで内部的に実装されているSQLのSELECT文(SQLiteの場合)
(2)JSON形式で結果を出力する

 具体的には、以下のようなハッシュ配列を生成しなければなりません。前掲の別稿でも触れたように、labelキーは候補リストに表示するテキストを、valueキーはテキストボックスに反映するテキストを、それぞれ表します。

JSON
[
  {"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メソッド"}
]
入力値「as」の場合の出力(例)

3. クライアントサイド・ページを用意する

 最後に、サーバーサイドに対して候補リストを要求するよう、AutoCompleteウィジェットを用意します。

HTML
<!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>
サーバーサイドに候補リストを要求するためのコード(ac_server.html)

 サーバーサイドと連携するうえでのポイントは一点、太字の部分です。sourceパラメーターに対して、サーバーサイドのパス(ここでは「record/autocomplete」という相対URL)を指定するだけです。これによって、minLength/delayパラメーターの条件を満たしたタイミングで、Ajax要求が発生し、サーバーサイドから候補リストを取得することができます。

※以下では、本稿の前後を合わせて5回分(第17回~第21回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery UI逆引きリファレンス
17. AutoCompleteウィジェットでオートコンプリート機能付きのテキストボックスを生成するには?

テキストボックスに最初の何文字かを入力すると、それにマッチする候補リストを表示するオートコンプリート機能を実現できる、AutoCompleteウィジェットの基本的な実装方法を紹介。

jQuery UI逆引きリファレンス
18. AutoCompleteウィジェットの検索/表示方法をカスタマイズするには?

AutoCompleteウィジェットのイベントやメソッドを利用しながら、候補リストの検索/選択時の処理をカスタマイズする方法について説明。

jQuery UI逆引きリファレンス
19. 【現在、表示中】≫ AutoCompleteウィジェットで候補リストをサーバーサイドから取得するには?

AutoCompleteウィジェットの候補リストをサーバーサイドで管理し、Ajax経由でそのリストを取得する方法を解説。

jQuery UI逆引きリファレンス
20. Selectableウィジェットで選択可能なリストを作成するには?

マウス・クリックによる単一選択や、マウス・ドラッグによる範囲選択などが実現できるSelectableウィジェットの基本的な使い方を解説。

jQuery UI逆引きリファレンス
21. Draggable/Droppableウィジェットでドラッグ&ドロップ機能を実装するには?

ページ上の指定された要素をマウスでドラッグ&ドロップできるようにするDraggable/Droppableウィジェットの基本的な使い方を解説。

サイトからのお知らせ

Twitterでつぶやこう!