ATG Search supports a type-ahead feature that provides selections to the user for completing the query text. As the user enters text in the search box, a dropdown menu is displayed listing strings that match the characters entered. For example, if the user types “bla,” the dropdown may display “black,” “bland,” and “blank.” If the user then types “n,” the dropdown now displays only “bland” and “blank,” because the typed substring no longer matches “black.” At any point, the user can select a text string from the dropdown, and it will be entered in the text box. The user can then click the submit button to issue a query with the selected text. Or the user can ignore the dropdown and type in the complete text to search for.
The type-ahead strings are supplied as post-indexing customization data. See the ATG Search Administration Guide for information about how to create this data.
Implementing type-ahead on the client side involves creating two pages:
A type-ahead page for submitting type-ahead queries and rendering the returned autocomplete strings.
A search page containing a standard search form handler, such as
QueryFormHandler, which is used to construct the search form and issue queries against (typically) catalog data. This page also includes a JavaScript autocompleter function that uses AJAX to render the type-ahead page, populate the dropdown with the results, and fill in the text box with the user’s selection.
Note that the type-ahead data and the catalog data can either be in the same index or in separate indexes. Using separate indexes (and therefore separate search engine instances) is highly recommended for performance reasons.
The examples in this section use the Ajax.Autocompleter function from the script.aculo.us open source JavaScript library. For information about this library, see:
http://script.aculo.us
You can use an autocompleter function from a different JavaScript library instead, though you might then need to implement a different servlet bean or form handler to use on the type-ahead page.
The WAR file for the QueryConsole sample application includes the script.aculo.us JavaScript files. The WAR file is located at:
<ATG9dir>/DAF/Search/Base/QueryConsole/web-apps/queryconsole.war
