Typeahead is a form field that provides hints or data to users as they type. It may also be referred to as a lookup.
As the user types, matching items from the database appear in a selection list below the typeahead field.
Typeahead should use the following standards:
- Begin searching after 2 characters have been entered. The matching characters can be anywhere in the item being
searched on, not just the beginning.
- Highlight the matching characters (hints) in the search results.
- Show 10 results.
- Provide an option to add a new item at the bottom of the list of results.
- Can include multiple types of information, such as client name, client ID, type, and office in the dropdown.
However, this content should only display the primary field being searched on (for example, client name).
- If the typeahead is searching on multiple items (such as client name and client ID):
- The label should be the common element (such as "Client").
- Prompt text should include the items being searched. For example, "Enter the client name or ID."
Check out UI-Bootstrap's
documentation