On the search page, you include a <div> element in the search form to provide a hook for associating the type-ahead drop-down list with the search text input:
<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>
The page also needs JavaScript to call the autocompleter function. The example below creates a JavaScript function called buildQueryCallback, which constructs the URL (including query parameters) for rendering the type-ahead page. The example also creates a JavaScript function called AutoComp, which is executed when the page loads. The AutoComp function:
Calls the
Ajax.Autocompleterfunction with arguments that associate it with the text field and<div>element in the search form shown above.Renders the type-ahead page using the URL constructed by the
buildQueryCallbackfunction, adding a query parameterqwhose 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' , {frequency: 0.2,
callback: buildQueryCallback, paramName: "q" });
}
document.onload = AutoComp();
</script>For example, if the user types “fla”, the URL constructed is:
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.
