Autosuggest

The autosuggest component assists users in query creation and completion by searching a dynamic list for related keywords, phrases and items.

Default

This is the most basic method of displaying suggestions.

Note that they can be indented (to indicate topology for example) - type "a" to see this demonstrated by the Glasgow office suggestion.

Icons

You can insert a Backpack icon next to each suggestion, useful for differentiation e.g. between airports, cities, and countries.

Subheadings

Additional suggestion information can be displayed as a subheading.

Tertiary label

If subheadings are not enough, you can add some tertiary information too.

Combination

This example shows all of the above combined.