Google Suggest風のオートコンプリート検索を実装する方法
参考サイト1)
How to use text_field_with_auto_complete
参考サイト2)
Rails でAjaxメモ
うちの環境では、proxy_passがあるので、text_field_with_auto_complete ヘルパーをそのまま使えなかった！！
・CSS準備
div.auto_complete {
width:350px;
background:#fff;
text-align:left;
}
div.auto_complete ul{
border:1px solid #888;
margin:0;
padding:0;
width:100%;
list-style-type:none;
}
div.auto_complete ul li{
margin:0;
padding:3px;
}
div.auto_complete ul li.selected{
background-color:#ffb;
}
div.auto_complete ul strong.highlight{
color:#800;
margin:0;
padding:0;
}
・javascriptロード
prototype.js effects.js controls.js
・list.rhtml内
input id="contact_name" name="contact[name]" size="30" type="text"
div class="auto_complete" id="contact_name_auto_complete"
(javascript)
var contact_name_auto_completer =
new Ajax.Autocompleter('contact_name', 'contact_name_auto_complete', '/rails1/facilities/auto_complete_for_contact_name', {})
第三引数に、controllerのパスを書く
・controller
def auto_complete_for_contact_name
keyword = params[:contact][:name] +'%'
conditions =["medifacilitieskana like ?",keyword]
@items = Facilitie.find (:all,:conditions => conditions,
:select => 'medifacilitiesnm',:limit => 10 )
render :inline => "<%= auto_complete_result @items, 'medifacilitiesnm' %>"
end
