1. Display a text field to allow typing
A text field is required. It can be a text field for search box or for a form.
2. Click on the text field
Click on the text field to start typing
3. List of suggested items
Present a list of items that has matching keyword of what the user is entering in the text field even before the user is finished typing.
4. Select an item from the list
On hover to highlight row and select the item from the list.
5. Click on the search button to submit
To submit the search keyboard, click on the search icon.
1. Auto Complete on a form field
Click on a text field of a form to enter keyword
2. List of suggested items
As the user types in data, a list of suggested items that match the inputted data is displayed, with the matching keyword highlighted in bold.
Why Use This Pattern?
- To expedite a user’s search by offering suggestions based on the user’s first several keystrokes into a query box.
- To help users find the item even if they do not remember the correct spelling.
What is the Solution?
- Present a list of items that match what the user is entering in the text field even before the user is finished typing.
- Allow the user to easily select the matching item with a mouse click or keyboard arrow navigation.
- As the user types in data, a list of suggested items that match the inputted data is displayed.
- As more text is inputted, the displayed list is updated to matching the updated query – narrowing down matching items.
When To Use This Pattern?
- To help the user save time and keystrokes.
- When the type of information entered can be quickly matched with a specific piece of information in the system.
- When input accuracy is essential.
- When the number of items would be too large or inconvenient to display in a standard drop-down box.
Do Not Use This Pattern When
- There’s no text field available for user to type in keyword.
- When there’s no available data for user to filter