jQuery UIを使って、オートコンプリート機能を実装してみる@rails3.1

facebookなどの検索BOXで途中まで入力すれば、結果の一部が出てくるあれです。

rails3.1からjQueryがデフォルトになったのですが、jQuery UIはまだ有効になっていないので有効にする。

application.jsの//= require jqueryの下あたりに以下を追記
//= require jquery-ui

で、ビューに検索BOXをJSで作る。

view plainprint?

1. <input type="text" id="textbox1"></input>  
2. <script type="text/javascript" charset="utf-8">  
3.   $(function(){  
4.     $("#textbox1").autocomplete({  
5.       source : "/auto_complete"  
6.     });  
7.   })  
8. </script>  

<input type="text" id="textbox1"></input>
<script type="text/javascript" charset="utf-8">
  $(function(){
    $("#textbox1").autocomplete({
      source : "/auto_complete"
    });
  })
</script>

sourceの部分をルーティングで設定する。
get 'auto_complete' => 'api#auto_complete'

コントローラーはこんな感じで

view plainprint?

1. def auto_complete  
2.   if request.xhr?  
3.     data = Array.new  
4.     data_items = Data.where('name like ?', "%#{params[:term]}%")  
5.     data_items.each do |f|  
6.       data << f.name  
7.     end  
8.     return render data  
9.   end  
10. end  

  def auto_complete
    if request.xhr?
      data = Array.new
      data_items = Data.where('name like ?', "%#{params[:term]}%")
      data_items.each do |f|
        data << f.name
      end
      return render data
    end
  end

検索BOXで入力したキーワードは都度、sourceで設定したアドレスに対して、params[:term]で送られます。
で、結果をjsonで返せば動作するのですが、そのまま返すと不必要なデータもそのまま送ってしまうので、必要なカラムのデータだけ送るよう、配列を作りなおしてます。
もう少しうまいやり方もありそうですが。。。
あと、request.xhr?と指定すると、ajax以外からのアクセスを弾いてくれるようです。

ちなみにCSSを使う場合には、assetsのcssフォルダ下にjquery-ui-1.8.16.custom.cssをおいて、jsを呼び出すのと同じように
*= require_jquery-ui-1.8.16.custom
をかけばOK
画像は、assets/image/jquery-uiの下にimageフォルダごとコピーすればOK。

参考：http://d.hatena.ne.jp/naoty_k/20110925/1316969446
http://blog.livedoor.jp/satoyansoft/archives/65458957.html