もふもふ技術部

Ruby on Railsでオートコンプリート


rails3-jquery-autocompleteどね?

お決まりのGemfileに追記

念のため書いておくと、ここでいうオートコンプリートとはGoogle検索のサジェスト的な動作のことね。あのテキストを入力するとプルダウンでにょろっと出てくるやつ。

例えば、membersテーブルのname(氏名)をオートコンプリートしたい場合。

View

Controller

routes.rb

application.jsに追記

cssファイルも入手してきてassets/stylesheets配下に置いておく。
そして、application.cssに追記

出来上がり。
こんなmemberがいるとき。
autocomplete_01

こんな感じにサジェスト。
autocomplete_02

検索条件をカスタマイズしたい

デフォルト前方一致になっているが、例えば後方一致でサジェストしたい場合。

Controllerにメソッドを追加

autocomplete_03

no existing match

1件もマッチしなかった場合に”no existing match”という文言がサジェストされる。実はこれ変更出来ない(たぶんね)。
autocomplete_04

これに関してGitHubで動きがあって、修正している形跡があるんだけども、masterには反映されてない…。
https://github.com/crowdint/rails3-jquery-autocomplete/pull/216

しょうがないので、gemのソースコードを落として該当部分を直接編集し、gemはアプリ内のソースコードを参照するように設定。これでOKと。

おまけ

じつはちょいミスではまった。

上記みたいにgemライブラリはアプリケーションごとに管理しようとしたんだけど、この場合webrick動かすときも一回目はbundle execつけなきゃいかんのね…。

ぐぬぬ。

The following two tabs change content below.
原田 敦

原田 敦

日本CAWのエンジニア。もふもふ部の部長。得意分野はRuby on Railsを使った小規模WEBアプリケーションを高速で開発すること。週末の楽しみは一人お菓子パーティー。三度の飯より小動物をもふもふするのが好きです。