Skip to content

Using scoped search UI helpers

August 2, 2011

Scoped search comes packed with some handy GUI helpers. An ajax auto completer that handles the auto-completer drop-down box, and column sort helpers.

The ajax auto-completer drop-down comes in two flavors one for JQuery and the other for Prototype. The code samples in this post will use the JQuery flavor.

Here is an example of the auto-completer ajax drop-down usage, in the view place the following form tag where you want the search box to show:

<%= form_tag books_path, :method => :get do %>
  <%= auto_complete_field_tag_jquery(:search, params[:search], {:placeholder => "Filter ..."}) %>
  <button id='submit_search'">Search</button>
<% end -%>

To control the look of the search box use the following css classes: ui-autocomplete-input, ui-autocomplete-loading and ui-autocomplete-error. The auto_complete_field_tag_jquery accepts additional options hash for further controlling it’s behavior such as delay and min_length.

Another useful helper method is the sort helper. The sort helper draws an arrow at the top of the sorted column pointing to the sort direction, it also adds order parameter to the url. Together with the ability of the scoped_search to add an order-by sql clause, it makes a complete sorting solution. The reason for sending a new request to the database instead of sorting in the client is that many applications uses pagination. When using pagination client side sort may cause wrong results. Here is an example of using the sort helper:

<table>
  <tr>
    <th><%= sort :name %></th>
    <th><%= sort :"author.last", :as => "Author" %></th>
  </tr>
  <% for book in @books %>
    <tr>
      <td><%= book.name %></td>
      <td><%= book.author %></td>
      <td><%= link_to "Show", book %></td>
      <td><%= link_to "Edit", edit_book_path(book) %></td>
      <td><%= link_to "Destroy", book, :confirm => 'Are you sure?', :method => :delete %></td>
    </tr>
  <% end %>
</table>
Advertisements

From → Design, Developers

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: