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