Build an Autocomplete Search Bar

Implement an autocomplete search-bar component according to a provided design mockup. Functional requirements When the user types a query, display a list of matching suggestions. Do not display the suggestion list when the query is empty. Update suggestions as the input changes. When the user clicks a suggestion, populate the search input with that suggestion and close the list. Adjacent suggestion rows must use alternating background colors (for example, rows 1, 3, and 5 use one color, while rows 2, 4, and 6 use another) to match the design. Handle the no-results state appropriately. Input data The component receives candidate suggestions, either as a local array of strings or from an asynchronous search API. The matching rule, maximum number of results, keyboard behavior, and exact visual styling should follow the interviewer’s mockup and clarifications. Example Candidates: ["apple", "apricot", "banana", "grape"] For input "ap", the component may display apple, apricot, and grape. After clicking apricot, the input value becomes apricot and the suggestion list closes. Every adjacent list row has an alternating background color.