 |
Filtering Autocomplete results with text_field_with_auto_complete
Rails is definitely great for doing flashy stuff with Ajax. Recently I was exploring
the ins and outs of text_field_with_auto_complete function, which is part of the
scriptaculous library that comes with Ruby on Rails.
When you have to make a simple search box that displays autocomplete options from a single database table
as you are typing, it is pretty easy with rails.
For the purpose of this discussion, we'll assume that we need to select from a database table called
categories and the field to search for is called short_desc. The bold font shows
the rails functions that you need to call to make this possible.
In the view
------------
<head>
<title><%= javascript_include_tag :defaults %></title>
</head>
<%= form_tag :action => 'search' do %>
Search <%= text_field_with_auto_complete :category, :short_desc %>
<input type="submit" value="search" />
<%= end %>
</body>
In the controller
-----------------
class MyController < ApplicationController
# Add the following line below
auto_complete_for :category, :short_desc
and that's all there is to it. Now when you start typing in the text box in your form,
it will query the database and populate the drop-down under the text box with results
from the database. All this is described in various tutorials on the web, rails programming books
and on scriptaculous's own website.
|
There are several problems with this simple bit of code. For one thing, it may not be possible
to always provide all the auto-complete choices from a single column on a single database table
and we may need to fetch from more than one column or query multiple tables for the choices. We may also need to
filter the available choices a bit further (for instance, we may only wish to see active categories).
Alternatively, we may
wish to limit the available auto-complete choices based on values of other fields in the web page.
Also, we may wish to only start showing the available choices after the user has typed in at least
X characters. For solutions to all these problems, read on further.
For a real practical example, let's
say that you want to have two fields in your search form. The first field should be a
select box and the second field should be our text_edit_with_auto_complete marvel. We
want it so that our auto-complete results should limit the autocomplete drop-down choices to
records based on what is selected in the select box (first field) AND what is being typed in the
text box (second field)
Suddenly things aren't so simple any more. For one thing, googling doesn't seem to bring
back anything helpful on this topic. So what do you do now? Well, aren't you glad that you found
this website? I actually encountered this very issue while making my first auto-complete
text box and managed to resolve it in a few hours, with a lot of googling, close
inspection of the source code, examining HTTP headers and javascript debugging. I'm sharing
these results with you to use and enjoy!
In our example, we'll assume that there's a parent table called manufacturers and we
want our select box to pull results from this table. We'll assume that manufacturers has a
parent-child relationship with categories and each manufacturer has many categories.
|
|