There are two AutoComplete widgets on this page that each point to a
different DS_JSArray DataSource instance. Driving each DataSource is a local
JavaScript array of strings: statesArray and areaCodesArray.
By pointing to arrays that are already loaded into memory the widget is
very fast to return data. Therefore, both AutoComplete instances are
configured to have a query delay of zero
seconds.
A few configurations have also been made to aid usability. The properties
autoHighlight and typeAhead have been enabled to
help reduce the number of user interactions. Enabling the
prehighlightClassName paramter provides supplemental visual
feedback for mouse events.
The formatResult method of the second AutoComplete instance
has been enhanced to display two data fields in the container, and the
forceSelection property has been enabled to prevent the user from
typing in a free-form selection.
Sample Code
CSS:
Markup:
JavaScript: