The World of Mayukh Bose

<< Back to Main Page Mayukh's world: e-mail me | about
Mayukh's World: Filtering text_field_with_auto_complete in Rails Saturday, December 20, 2014
Contents
  • Background
  • The Problem
  • Coding the View
  • Coding the Controller
  • Credits
  • My Free Software
  • Delphi/C++ Builder
  • Pocket PC
  • FreeSpeech Chat
  • C/C++ Freebies
  • Perl
  • Python
  • Ruby
  • My Ruby Code
  • Filtering with auto_complete
  • Migrating Rails
  • Ruby Tutorials and Software e-mail me

    Filtering Autocomplete results with text_field_with_auto_complete

    Background
    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.

    The Problem
    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.



    ^Up to Mayukh's World^ Next: Coding the View >>

    Copyright © 2004 Mayukh Bose. All rights reserved.
    This work may be freely reproduced provided this copyright notice is preserved.
    OPTIONAL: Please consider linking to this website (http://www.mayukhbose.com/) as well.