検索可能なプルダウンリストのオプション設定の調査

Ruby on Rails

前回、オプション指定の順序を間違えて、勝手に出来ないと思い込んでいたので、ここでもう一度オプション指定を見直してみることに。以下は現状で自分が理解できたauto_completeに関連するのオプションの指定方法の一部。

text_field_with_auto_completeのオプション

書式は以下のようになる。第3引数のハッシュはtext_fieldに設定されるオプションになるようだ。第4引数のハッシュはauto_completeに設定されるオプションだ。

<%= text_field_with_auto_complete :bank, :kana, {text_fieldオプション}, {auto_completeオプション} %>
スタイルシートの出力をキャンセルする。

text_field_with_auto_completeは、text_fieldごとに選択リスト描画用のスタイルシートを出力してくれる。しかし、自分好みにスタイルを指定したい時や、複数のauto_completeを利用し始めると、デフォルトのスタイルシートが邪魔になってくる。そんな時は:skip_style=>trueでスタイルシートの自動出力をキャンセルできる。

<%= text_field_with_auto_complete :bank, :kana, {}, {:skip_style=>true} %>

text_field_with_auto_complete、auto_complete_fieldのオプション

検索を開始する入力文字数を指定する。
  • デフォルトは :min_chars=>1 になっている。これは、テキストフィールドに1文字入力すれば、入力文字をキーに検索して選択リストを表示する設定だ。
  • もし :min_chars=>2 となっていれば、1文字入力しても何も起こらず、2文字目を入力した時に、検索が始まり選択リストが表示されることになる。
  • それでは、:min_chars=> 0 とした場合は...:min_chars=>1と同じ動きだった。
  • さらには、:min_chars=>-1 とした場合は...text_fieldにフォーカスがあたっていれば、未入力でも、escキーまたは矢印キーで選択リストが表示された。
検索中にイージケーター画像を表示する。

選択リストの検索に時間がかかる場合は、:indicatorオプションを利用すると、簡単に処理中のイージケーターを表示することが出来る。

<%= text_field_with_auto_complete :bank, :kana, {}, :indicator=>"auto_complete_indicator" %>
<%= image_tag("indicator.gif", :id=>'auto_complete_indicator', :style=>'display:none') %>
      • この場合、public/images/indicator.gifとして画像を保存しておく必要あり。（indicator.gifは任意の名前）
選択リストの表示文字列から必要な文字列だけ指定してtext_fieldに設定する。

上記のように一言で書くと感覚的に分かり難い動きだが...

<%# ビュー %>
<%= text_field_with_auto_complete :bank, :kana %>

# コントローラー
def auto_complete_for_bank_kana
  find_options = { 
    :conditions => [ "LOWER(kana) LIKE ?", '%' + params[:bank][:kana].downcase + '%' ], 
    :order => "kana ASC",
    :limit => 10 }
  @items = Bank.find(:all, find_options)
  render :partial => 'auto_complete_for_bank_kana'
end

<%# ビュー(_auto_complete_for_bank_kana.rhtml) %>
<ul>
  <% @items.each do |item| %>
    <li id=<%= item.id %>><%= item.kana %> <%= item.name %></li>
  <% end %>
</ul>
  • ところが、選択リストは五十音順に並んでいるのでカタカナ表記があると探し易いと思うが、選択してtext_fieldに設定する時は、簡潔に漢字の銀行名だけにしたい時もある。そんな場合は:selectオプションを利用すると便利だ。
    • :selectオプションで適当なclass属性"select_item"を指定して...
    • 選択リストを描画する時に、text_fieldに設定したい文字列をそのclass属性"select_item"で囲む。
<%# ビュー %>
<%= text_field_with_auto_complete :bank, :kana, {}, :select=>"select_item" %>

<%# ビュー(_auto_complete_for_bank_kana.rhtml) %>
<ul>
  <% @items.each do |item| %>
    <li id=<%= item.id %>><%= item.kana %> <span class="select_item"><%= item.name %></span></li>
  <% end %>
</ul>
  • これで漢字の銀行名だけがtext_fieldに設定される！
上記に関連して、もう一つのやり方
  • :selectオプションでは設定したいclass属性を指定したが、それとは逆に除外するclass属性を指定する方法もあった。
    • auto_completeのオプション指定は特に無し。
    • 選択リストを描画する時に、class属性"informal"が指定された範囲は、text_fieldに設定されない。（informal属性でない部分だけ設定される。）
<%# ビュー %>
<%= text_field_with_auto_complete :bank, :kana %>

<%# ビュー(_auto_complete_for_bank_kana.rhtml) %>
<ul>
  <% @items.each do |item| %>
    <li id=<%= item.id %>><span class="informal"><%= item.kana %> </span><%= item.name %></li>
  <% end %>
</ul>
参考ページ
Nowhere Near - Rails で Ajax メモ (auto complete の使い方)

素晴らしいページに感謝です！

auto_complete_forのオプション

選択リストの並び順を変更する。

選択リストを検索する細かい制御をしたければ、自分で定義してしまった方が自由にアレンジできて便利だが、選択リストの並び順を変更するとか、そのくらいの程度なら、以下のようにオプションを指定することで対応できた。

# 銀行コードで降順に並べる。
auto_complete_for :bank, :kana, :order=>"id DESC"

# 最大表示件数を100件にする。
auto_complete_for :bank, :kana, :limit=>100
# ちなみにlimit=>-1とすると、最大表示件数は無制限になるようだ。

基本的にfindメソッドのオプションが指定できるようだ。そうすると、以下のようなオプション指定もやってみたくなるが、それはやっぱり無理だった...。（auto_complete_forが実行される時点では、params[:bank][:kana]パラメーターが無いので...。）

# 目的は検索を前方一致にしたかったのだが...
auto_complete_for :bank, :kana, :conditions => [ "LOWER(kana) LIKE ?", params[:bank][:kana].downcase + '%' ]
      • 検索の前方一致をオプションで指定する方法ってあるのだろうか？