FiltersLesson 154Free preview

Filter Dropdown

This lesson is part of How To · All levels

Summary

This lesson discusses a dropdown that comes with a search box to filter the options in it. This pattern is useful when a list of items is long, such as a list of countries or categories, so that the user does not have to scroll through the entire list. The focus of the implementation is to open the panel, filter the items, and close the panel when clicking outside.

Key points

Put the search input into the dropdown panel and listen to the event input
Filter links or menu items based on their text with includes()
Use the expanded aria on the opener button to declare panel status
Close the dropdown when a user selects an item, presses Escape, or clicks Outside

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.