Creating the Search Page

The search page is a standard search page (e.g., one that issues search requests using the QueryFormHandler) with some additions:

<script> tag that import the JavaScript libraries.

A <div> tag that enables you to associate the type-ahead dropdown with the search text input field.

JavaScript that calls the autocompleter function.

These additions are described below.

Importing the JavaScript Libraries

The script.aculo.us libraries are imported using <script> tags. For example:

<script src="scriptaculous/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/scriptaculous.js" type="text/javascript"></script>


Using a <div> Element

The following example illustrates the use of the <div> element:

<p>Search for: </p>
<dsp:input type="text" id="question" size="30" converter="nullable"
           name="question" bean="QueryFormHandler.searchRequest.question"/>
<div id="autocomplete_choices" class="autocomplete"></div>


Calling the Autocompleter

The example below creates a JavaScript function called buildQueryCallback, which constructs the URL (including query parameters) for rendering the type-ahead page. It also creates a JavaScript function called AutoComp. This function, which is executed when the page loads, calls the Ajax.Autocompleter function with arguments that associate it with the text field and <div> element in the search form shown above. Ajax.Autocompleter renders the type-ahead page using the URL constructed by the buildQueryCallback function, adding a query parameter q whose value is the string currently in the text box.

<script language="Javascript">
function buildQueryCallback(element, entry) {


  entry += "&environment=commerce";
  entry += "&language=english";
  return entry;
}


function AutoComp() {
var myAutoCompleter1 = new Ajax.Autocompleter('question', 'autocomplete_choices',
  'testtypeget.jsp' , {callback: buildQueryCallback, paramName: "q" });
}


document.onload = AutoComp();
</script>


For example, if the user types “fla,” the URL constructed by the JavaScript would be:

testtypeget.jsp?q=fla&environment=commerce&language=english

The query parameters are used to set the input parameters of the TypeAheadDroplet on the type-ahead page.

For more information about the Ajax.Autocompleter function, including additional options that can be specified in the function call, see:

http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleter