Rails入門日程調整アプリを作ろう7（番外編：インクリメンタル検索追加）

Rails入門日程調整アプリを作ろう6の続き。

Rails' Wikiの日程調整アプリを作ろうは実装 -4-(Htpasswd,routes,validation,layouts)で止まっているため、インクリメンタル検索の機能を付与してみました。
参考にしたページはpylori*style wiki - RailsでAjax: インクリメンタル検索英和辞書になります。

1.userのlistページに名前のインクリメンタル検索を追加する。

1-1.Ajaxを使うために、javascriptのライブラリであるprototype.jsをロードするため、/adjuster/app/views/layouts/application.rhtmlのhead部分に以下を追加します。

<%= javascript_include_tag 'prototype' %>

1-2./adjuster/app/views/user/list.rhtmlをコピーし、/adjuster/app/views/user/_searchresult.rhtmlを作成します。この_searchresult.rhtmlが検索結果を表示する部分で、検索語を入力する度に更新されます。

1-3./adjuster/app/views/user/list.rhtmlを編集します。observe_field文を追加し、検索結果表示部を外出しするため削除しています。

<h1>Listing users</h1>

<%= start_form_tag({:action => 'list'}, {:method => 'get'}) %>
  <%= text_field_tag :phrase, @phrase %>
  <%= observe_field(:phrase, :frequency => 0.5, :update => :results, :url => {:action => :search}) %>
  <%= submit_tag 'Search' %>
<%= end_form_tag %>

<div id="results">
  <%= render :partial => 'searchresult' %>
</div>

<br />

<%= link_to 'New user', :action => 'new' %>

1-4./adjuster/app/views/user/_searchresult.rhtmlを編集します。table、ページング部分を残します。tableは修正する必要なし。ページングを修正します。

<table>
  <tr>
  <% for column in User.content_columns %>
    <th><%= column.human_name %></th>
  <% end %>
  </tr>
  
<% for user in @users %>
  <tr>
  <% for column in User.content_columns %>
    <td><%=h user.send(column.name) %></td>
  <% end %>
    <td><%= link_to 'Show', :action => 'show', :id => user %></td>
    <td><%= link_to 'Edit', :action => 'edit', :id => user %></td>
    <td><%= link_to 'Destroy', { :action => 'destroy', :id => user }, :confirm => 'Are you sure?', :method => :post %></td>
  </tr>
<% end %>
</table>

<%= link_to 'Previous page', { :page => @user_pages.current.previous, :action => 'list', :phrase => @phrase } if @user_pages.current.previous %>
<%= link_to 'Next page', { :page => @user_pages.current.next, :action => 'list', :phrase => @phrase } if @user_pages.current.next >

1-5./adjuster/app/controllers/user_controller.rbを修正します。listを修正、今回新たに定義したsearchを追加します。

  def list
    @phrase = params[:phrase] || ''
    phrase = @phrase + '%'
    @user_pages, @users = paginate :users, :per_page => 10, :conditions => ["name like ?", phrase]
  end

  def search
    @phrase = request.raw_post || request.query_string
    phrase = @phrase.chop + '%'
    @user_pages, @users = paginate :users, :per_page => 10, :conditions => ["name like ?", phrase]
    render :partial => 'searchresult'
  end

searchの3行目、phrase = @phrase.chop + '%'の.chopは、検索した値に付与される"="を排除するためにつけています。*1

1-6.http://localhost:3000/userを表示し動作確認をします。

例がわかりにくいのですが、ちゃんと入力した値で前方一致検索されるようになります。

*1:Rails1.0では解消されたとありましたが、1.2から復活したみたいです。