Autocomplete User Search

Late October, 2026

Functional Requirements 1. Display an input field where users can search by name or email. 2. Fetch matching users as the user types. 3. Display matching suggestions in a dropdown. 4. Highlight the matching portions of names or email addresses. 5. Allow users to select a suggestion. 6. Populate the input field with the selected user’s email. 7. Support an optional debounce delay (e.g., 200 ms). 8. use cache to avoid duplicate server requests Critical Question: How would you ensure that the slower response for patrick does not overwrite the newer search results for patric? You are provided with a queryUsers API that accepts a search string and returns a list of matching users. here's the structure type UserSearchResult = { target: { name: { first: string; last: string; }; email: string; }; by: { name: { value: string; indices: { start: number; end: number }[]; highlight: <R>( mapSegment: (match: string, index: number) => R ) => (string | R)[]; }; email: { value: string; indices: { start: number; end: number }[]; highlight: <R>( mapSegment: (match: string, index: number) => R ) => (string | R)[]; }; }; };