久しぶりにjQueryUIのサイトを見てみたら、新機能としてAutoCompleteなるものが追加されていました。丁度仕事でも使いそうなので、やってみることに。
新規にRails3でプロジェクトを作成したばかりなのでとりあえず、mainという名前でデフォルトのコントローラを作る。
  #rails g controller main
  create  app/controllers/main_controller.rb
  invoke  erb
  create    app/views/main
  invoke  test_unit
  create    test/functional/main_controller_test.rb
  invoke  helper
  create    app/helpers/main_helper.rb
  invoke    test_unit
  create      test/unit/helpers/main_helper_test.rb
とりあえずサーバーを起動して main コントローラにアクセスしてみると、そんなページないよーってな感じでRouting Errorになる。 今までは何の問題もなくいけてたんだけどなー、、、Rals3からはいちいちルーティングファイルに書き込む必要があるのだろうか? 調べないとよくわからないので、とりあえず routes.rbをデフォルトのコントローラとアクションが main/index になるように変更。
  # You can have the root of your site routed with "root"
  # just remember to delete public/index.html.
  # root :to => "welcome#index"
  root :to => "main#index"
でapp/views/main/index.html.erb には、jqueryUIのautocompleteのドキュメントに従ってこんな感じでサンプルを書いてみる。 とりあえずデータはJavaScript直書きで持たせてみる。
	<input type="text" id="textbox1"></input>
	<script type="text/javascript" charset="utf-8">
		$(function(){
			var dataItems = ["C#", "C++", "C", "Java", "JavaScript", "Ruby", "IronRuby", "JRuby"];

			$("#textbox1").autocomplete({
				source : dataItems
			});
		})
	</script>
ページを表示してみる。

45)

かなり簡単にできてしまいます。 でも、実際にはサーバーと通信させる場合のほうが多いと思います。 その場合は source オプションに JSONデータを返すURLを指定してあげて、サーバー側では、 文字列配列か、もしくは { label : '表示項目', value : 'Value値'}の配列を返すように実装してあげれば良いようです。
ユーザーが入力した文字は term というパラメータ名でサーバーに渡るので、そいつをキーワードとしてフィルタリングするような感じになるかと思われます。
DBをいちいち用意するのは面倒だったので、あらかじめ配列で持たせたプログラミング言語名称一覧からユーザーが入力した文字に該当するものをJSONで返すような処理を書いてみました。
	class MainController < ApplicationController
	  def index
			#なんかまたルーティングの設定なのか、上手く行かのいので indexアクションの中でajaxリクエストかどかで処理を分けてしまった、、、
	    if request.xhr?
	      data_items = %w(C# C++ C Java JavaScript Ruby IronRuby JRuby)
	      return render :json => data_items.find_all{|lang| lang.include?(params[:term]) }
	    end
	  end
	end
JavaScriptの方は sourceオプションをURLに変更するだけ。
	<input type="text" id="textbox1"></input>
	<script type="text/javascript" charset="utf-8">
		$(function(){
			//var dataItems = ["C#", "C++", "C", "Java", "JavaScript", "Ruby", "IronRuby", "JRuby"];
			$("#textbox1").autocomplete({
				//source : dataItems
				source : "/"
			});
		})
	</script>
う〜ん、なんて簡単なんだ、、、、。

31)