suggest.jsとrailsで補完候補表示

tech

あまりにあっけなかったので意外。30分くらいでできた。
http://www.enjoyxstudy.com/javascript/suggest/

  • 入力内容をもとに検索を行い、補完候補を表示します。(Google Suggestぽく)
  • Ajaxでは無く、初回画面表示時のみデータの読み込みを行い、それ以降は、クライアント側で対象データから検索します。したがって、入力内容に変化があってもサーバ側にアクセスすることはありません。
  • 検索は、前方一致/部分一致、大文字と小文字の区別あり/なしといったように、オプションで簡単に指定できます。また、その他にも様々なオプションが指定可能です。
  • 検索結果の表示上限を指定できます。(デフォルト上限20件)
  • 補完候補はキーボードの上下と、マウスにて選択できます。また、キーボードで選択中にESCキーでキャンセルといったような操作も可能です。
  • スペース区切りで、複数キーワードの入力補完が行えます。
  • IMEで入力中であっても、検索が行われます。


たとえば企業をたくさん登録するとして休日と営業時間は似ているはずだから候補表示したい、というような場合。

suggest.jsは下記みたいな配列を補完候補として使用する。

var holiday_list = [ "土曜","日曜","祝祭日","休日、年末年始"];

これをrails側で出力するには

■Controller：Company

  def suggest_list
    @holidays = Company.find(:all,:select=>"distinct holiday")
  end

■View：suggest_list.rhtml

var holiday_list = [
<% @holidays.each do |i| -%>
  "<%= i.holiday %>",
<% end -%>
  "#thisisdummyforlist#"
];

として入力フォームからとするだけ。
ポイントは下記のとおり。
・:selectでdistinct フィールド名として一意なパターンのみ抽出すること
・Viewの配列要素生成の最後で,が原因のエラーにならないよう"#thisisdummyforlist#"とおまじないを入れること