FormsLesson 146Free preview
Autocomplete
This lesson is part of How To · All levels
Summary
This lesson discusses the list of automatic suggestions that appear when a user types in the search box. The list of suggestions is filtered from a data set based on the text that is typed, and then the user can select one of the items. Good implementation supports keyboard navigation, closes the list when clicking outside, and informs the screen reader about changes in the list.
Key points
- Listen to event input, not just change, so that the suggestions are updated every time you type.
- Filter data by comparing lowercase versions so that the search is not case-sensitive
- Support the arrow, enter, and escape buttons to navigate the advice list
- Use the ARIA attributes such as the role="combobox", the aria-expanded, and the aria-activedescendant
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.