The store.war/cartridges/SearchBox/SearchBox.jsp page renders the content in the SearchBox content item. This includes both the search box form itself and the auto-suggest panel, if one has been enabled.
The SearchBox.jsp page renders the auto-suggest panel inside a custom Dojo widget. The renderer uses the value of the contentItem.autoSuggestEnabled boolean to determine whether or not the auto-suggest widget should be initiated. When initiated, the widget retrieves, via AJAX calls, a list of potentially matching search terms (auto-suggestions) based on the characters the shopper enters in the search box. The widget displays the auto-suggestions as a list of clickable links below the search box. Clicking one of these links initiates a new search with the link’s term used as the keyword.
The auto-suggest widget’s dojotype is atg.store.widget.AutoSuggest. The JavaScript code that supports the widget is found in store.war/javascript/widget/template/AutoSuggest.js and the HTML markup for the widget <div> is found in store.war/javascript/widget/template/AutoSuggest.html. To make the AutoSuggest.js source available to Commerce Reference Store pages, the following script include tag is added to store.war/includes/pageStartScript.js:
<script type="text/javascript" src="${javascriptRoot}/widget/AutoSuggest.js"></script>
The SearchBox.jsp initializes the AutoSuggest widget with a set of input parameters, shown below. These input parameters allow the widget to build up and submit the URL that requests auto-suggest data from the Assembler. They also control the length of time that the auto-suggest panel is displayed.
Parameter | Type | Description | Default |
|---|---|---|---|
| String | Unique identifier for the | None |
| String | The URL used for AJAX requests that retrieve the auto-suggestions. | None |
| String | The path to the Endeca content folder that contains the | None |
| String | The context path for the URL that is used for AJAX requests, for example:
| None |
| String | The ID of the search box that the widget is attached to. | None |
| String | The ID of the Search button. The | None |
| Number | The number of characters the shopper must enter before the auto-suggest panel appears. | 3 |
| Number | The time, in milliseconds, taken to fade in and out the auto-suggest panel. | 500 |
The query the AutoSuggest widget sends to the Assembler specifies JSON as the format for the returned data. In response to the query, the Assembler returns an AutoSuggestPanel content item in JSON format. The AutoSuggestPanel content item contains DimensionSearchAutoSuggestItems sub-items; it is these sub-items that contain the actual auto-suggestions. The widget parses out the data in the DimensionSearchAutoSuggestItems sub-items and renders them as clickable links in the panel.
In addition to querying the Assembler for auto-suggestions, the AutoSuggest widget manages keyboard events and mouse clicks so that the shopper can move among auto-suggestion terms, select a term, or hide the auto-suggest panel. Also, note that the widget fails silently if the AJAX request times out or fails for any reason, as the use of the auto-suggest panel is not essential in order to perform a search.
To use the AutoSuggest widget, you must provide values, via attributes passed to the widget, for any initialization parameters that do not have defaults. For example, the SearchBox.jsp passes the following values:
<span dojotype="atg.store.widget.AutoSuggest"
id="autoSuggest"
ajaxUrl="${contextPath}/assembler"
contentCollection="/content/Shared/Auto-Suggest Panels"
siteContextPath="${contextPath}"
searchBoxId="atg_store_searchInput"
submitButtonId="atg_store_searchSubmit"
minInputLength="${minAutoSuggestInputLength}"
animationDuration="500">
</span>
