Rich Internet Applications

When trying to look up data in a database, a very helpful feature is “search as you type” functionality: you enter some characters and get the matching hits immediately before submitting your query. One popular AJAX example for this is GoogleSuggest

I decided to add a similar feature to CanooNet, our popular German dictionary and grammar. And here are the implementation steps, using the AutoCompleter function of the script.aculo.us AJAX library:

1. Follow the first three steps in the usage guide to integrate script.aculo.us in your web page.
2. Refer to the AutoCompleter documentation to add the AutoCompleter to the web form.

   
<td class="search" noWrap height="1" width="20" align="center">
  <span id="myindicator" style="display: none"><img src="/services/images indicator_mozilla_blu.gif" alt="Working..."></span>
</td>
 
<td class="search" nowrap colspan="2" height="1">
  <input id="input" name="input" autocomplete="off" value="" class="Topmenu2" style=" height: 22px" maxLength="100" size="34">
  <div class="auto_complete" id="input_auto_complete"></div>
</td>
 


   The first <td> displays the indicator icon while the search is running. The second <td> defines the input field and attaches the AutoCompleter to this field. The autocomplete=”off”- Input-Field-Option switches off the autocomplete of your browser – this would confuse while entering the characters.

3. At the end of your form you can configure the AutoCompleter behaviour:

   
<script type="text/javascript">
           new Ajax.Autocompleter('input',
                          'input_auto_complete',
                          '/services/AjaxController',
                          {frequency: '0.3',
                          minChars: '1',
                          indicator: 'myindicator',
                          parameters: 'lang=' + language,
                          afterUpdateElement: getSelection});
</script>
 


   The meaning of the parameters is:

   1. Name of the input field (’input’)
   2. div-id of your <td>
   3. URL for the lookup. In our example a special Java servlet named AjaxController is called. This servlet returns the matches in a format that can be parsed by the AutoCompleter. The servlet is described below.
   4. Additional parameters:
   1. frequency indicated the time delay after a keystroke before triggering the URL
   2. minChars defines the amount of characters that have to be entered into the input field before triggering the URL
   3. indicator-id of the “wait while searching” icon
   4. Additional URL parameters can be passed using ‘parameters’. In our case we need a language parameter.
   5. afterUpdateElement: in our example a getSelection-Function is called to set the correct selected value into the input field.
4. The Java servlet mentioned above implements a simple method returning the data that has to be displayed by the AutoCompleter:

   
public void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
    res.setContentType("text/html; charset=ISO-8859-1");
    PrintWriter writer = new PrintWriter(new BufferedWriter(res.getWriter()), true);
    writer.println(getContent(req, res));
    writer.close();
}


   The data returned by the servlet looks like this:

   
<ul>
<li id="gang">Gang <span class="informal"> (Noun)</span></li>
<li id="gangart">Gangart <span class="informal"> (Noun)</span></li>
<li id="gangbar">gangbar <span class="informal"> (Adjective)</span></li>
<li id="gangbarkeit">Gangbarkeit <span class="informal"> (Noun)</span></li>
<li id="gangchef">Gangchef <span class="informal"> (Noun)</span></li>
<li id="gangdifferenz">Gangdifferenz <span class="informal"> (Noun)</span></li>
<li id="gangerz">Gangerz <span class="informal"> (Noun)</span></li>
<li id="ganges">Ganges <span class="informal"> (Noun)</span></li>
<li id="gangfenster">Gangfenster <span class="informal"> (Noun)</span></li>
<li id="ganggenau">ganggenau <span class="informal"> (Adjective)</span></li>
<li id="ganggenauigkeit">Ganggenauigkeit <span class="informal"> (Noun)</span></li>
<li id="ganggestein">Ganggestein <span class="informal"> (Noun)</span></li>
<li id="ganggewicht">Ganggewicht <span class="informal"> (Noun)</span></li>
<li id="ganggrab">Ganggrab <span class="informal"> (Noun)</span></li>
<li id="gangklo">Gangklo <span class="informal"> (Noun)</span></li>
<li id="gangklosett">Gangklosett <span class="informal"> (Noun)</span></li>
</ul>


   The AutoCompleter is able to differentiate between the information to be displayed in the drop down (e.g. “Gang (Noun)”) and the information to be passed as form parameter after selecting an entry (e.g. “gang”). The latter one is the input field value sent by the browser when the user hits the search button. The informal part of the display string is separated using .

   This is everything you have to do in order to establish a “search as you type” in your web form. While this is the “easy” part, improving the search performance is much more sophisticated: in CanooNet we have to match more than 250.000 word form entries using wildcards in order to get the information to be displayed by the AutoCompleter.

And this is the result:

This entry was posted on Tuesday, March 20th, 2007 at 2:21 pm by Dirk and is filed under AJAX, General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.