Controlled Input with Suggestion List
Build the foundation: a controlled input that shows a filtered suggestion dropdown below it.
Component Structure Overview
An autocomplete component has two main parts: a controlled text input and a dropdown suggestion list. The input sits in normal document flow, and the dropdown is positioned absolutely directly below it. Together they function as a single interactive widget, though they are separate DOM elements.
Required State Variables
You need four state variables: inputValue (string — what is typed), suggestions (array — current matching items), isOpen (boolean — whether the dropdown is visible), and selectedIndex (number — which suggestion is highlighted for keyboard navigation, starts at -1 for none selected).
All lessons in this course
- Controlled Input with Suggestion List
- Keyboard Navigation in Suggestion Lists
- Async Suggestions with Debounce
- Accessibility for Autocomplete Widgets