[ThinkIT] 第5回：Ajaxアプリケーションの作成 (2/4)

Ruby on Rails入門

第５回：Ajaxアプリケーションの作成
著者：アスタリクス大西正太 2006/6/21

Ajaxの実装

それでは前回までに作成したサンプルの検索フォームにオートコンプリート機能を付加してみましょう。

ビューの記述

まず検索フォームの記述がある「list.rhtml」を編集します。ファイルの冒頭でJavaScriptのライブラリを読み込みます。


		<%= javascript_include_tag "prototype" %>

		<%= javascript_include_tag "effects" %>

		<%= javascript_include_tag "controls" %>

続いてテキストフィールド部分の記述を変更します（「text_field」タグを「text_field_with_auto_complete」に書き換え）。なお「:contact」は対応するモデル名、「:name」はその属性名です。

変更前


		<%= text_field :contact, :name, :value => @keyword %>

変更後


		<%= text_field_with_auto_complete :contact, :name, :value => @keyword %>

コントローラの記述

ContactsControllerにオートコンプリート機能を付加するために、クラス宣言直下にauto_complete_for宣言を記述します。


		class ContactsController < ApplicationController

		   auto_complete_for :contact, :name

		

		（省略）

		

		end

動作の確認

以上でオートコンプリート機能の付加は完了です。検索ページを表示して、登録されているコンタクト名の頭文字を入力してみてください。すると図1のように表示されます。

図1：オートコンプリートの表示
（画像をクリックすると別ウィンドウに拡大図を表示します）

著者プロフィール
株式会社アスタリクス大西正太
JavaEEフレームワークの設計構築や開発プロセス策定などの業務を経て、現在は新規ビジネス創生に携わる。Ruby on Rails上に構築したオープンソースのCMS「Rubricks」（http://rubricks.org/）のコミッタ。