Styling the Autosuggest widget

By default, the Autosuggest widget shows the suggested list IN the page flow. This means that any content below the Autosuggest textfield will be pushed down to accommodate this suggest list. This sample provides code for raising the suggest list above the page flow, so the content does not shift.

There are 2 main techniques for controlling page flow:

• Leave enough room in the default page for the suggestions.
• Use CSS to have the suggestions flow over the page content.

Note: Type "A" to activate these suggest fields.

Issue

If you don't reserve space for the suggestions and you have page elements below the autosuggest field, the page elements below the autosuggest widget will push down and it is likely that the page layout will shift to accommodate the suggestions.

Leaving Room for Suggestions

Product Name:

You can also use the 'maxListItems' option in the widget constructor to limit the number of returned suggestions. This will make your suggest list height more predictable. See this sample and the overview documentation.

CSS Flow

To avoid corrupting the page flow, you should style the autosuggest container to use position:absolute. This takes the suggest widget out of the page flow and the suggestions will cover the content.

Make sure that the z-index value for the autosuggest is higher than the other z-indexed elements, otherwise the suggestion list will not be displayed on top.