"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", em: "em", h1: "h1", h2: "h2", hr: "hr", li: "li", ol: "ol", p: "p", pre: "pre", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { id: "-building-a-production-ready-autocomplete-search-component-in-react", children: "🚀 Building a Production-Ready Autocomplete Search Component in React" }), "\n", _jsx(_components.p, { children: "An autocomplete (or typeahead) search input is a staple of modern web UI. It improves user experience by guiding users toward existing results and reducing typing effort." }), "\n", _jsxs(_components.p, { children: ["While it looks simple on the surface—an input and a list—building a ", _jsx(_components.em, { children: "good" }), " one requires handling several complex challenges:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Performance:" }), " Avoiding API spam with every keystroke (Debouncing)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Usability:" }), " Supporting full keyboard navigation (Arrows/Enter)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Robustness:" }), " Handling loading states, empty results, and closing on outside clicks."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Accessibility (A11y):" }), " Ensuring screen readers can interpret the component."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["In this guide, we will build a robust, reusable autocomplete component from scratch using ", _jsx(_components.strong, { children: "React (Hooks), TypeScript, and Tailwind CSS" }), "."] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "the-tech-stack", children: _jsx(_components.strong, { children: "The Tech Stack" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "React 18+" }), ": Using functional components and hooks (", _jsx(_components.code, { children: "useState" }), ", ", _jsx(_components.code, { children: "useEffect" }), ", ", _jsx(_components.code, { children: "useRef" }), ")."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "TypeScript" }), ": For type safety and better developer experience."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Tailwind CSS" }), ": For rapid, utility-first styling."] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "step-1-the-secret-sauce-custom-usedebounce-hook", children: _jsxs(_components.strong, { children: ["Step 1: The Secret Sauce (Custom ", _jsx(_components.code, { children: "useDebounce" }), " Hook)"] }) }), "\n", _jsxs(_components.p, { children: ["The biggest mistake beginners make with autocomplete is firing an API request on every single ", _jsx(_components.code, { children: "onChange" }), " event. If a user types fast, this can cripple your server."] }), "\n", _jsxs(_components.p, { children: ["We need ", _jsx(_components.strong, { children: "debouncing" }), ": waiting until the user has stopped typing for a few milliseconds before triggering the search."] }), "\n", _jsx(_components.p, { children: "Let's create a reusable custom hook for this." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "// hooks/useDebounce.ts\nimport { useEffect, useState } from \"react\";\n\nexport function useDebounce(value: T, delay: number = 500): T {\n const [debouncedValue, setDebouncedValue] = useState(value);\n\n useEffect(() => {\n // Set a timer to update the debounced value after the specified delay\n const timer = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n // Clean up the timer if the value changes before the delay expires\n // This is the magic part that cancels previous typing actions\n return () => {\n clearTimeout(timer);\n };\n }, [value, delay]);\n\n return debouncedValue;\n}\n\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "step-2-component-structure--state-management", children: _jsx(_components.strong, { children: "Step 2: Component Structure & State Management" }) }), "\n", _jsxs(_components.p, { children: ["Let's outline the state variables we need in our component (", _jsx(_components.code, { children: "Autocomplete.tsx" }), ")."] }), "\n", _jsx(_components.p, { children: "We need to track:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["What the user typed (", _jsx(_components.code, { children: "query" }), ")."] }), "\n", _jsxs(_components.li, { children: ["The results from the API (", _jsx(_components.code, { children: "suggestions" }), ")."] }), "\n", _jsxs(_components.li, { children: ["Is it currently loading? (", _jsx(_components.code, { children: "isLoading" }), ")."] }), "\n", _jsxs(_components.li, { children: ["Is the dropdown open? (", _jsx(_components.code, { children: "isOpen" }), ")."] }), "\n", _jsxs(_components.li, { children: ["Which item is highlighted via keyboard? (", _jsx(_components.code, { children: "activeIndex" }), ")."] }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// components/Autocomplete.tsx\nimport { useState, useEffect, useRef, KeyboardEvent } from \"react\";\nimport { useDebounce } from \"../hooks/useDebounce\";\n\n// Mock data for demonstration\nconst MOCK_DATA = [\n \"React\", \"Next.js\", \"Vue\", \"Svelte\", \"Angular\", \"TypeScript\", \"JavaScript\", \"Tailwind CSS\", \"Node.js\"\n];\n\n// Mock API function simulating network delay\nconst mockApiSearch = async (query: string): Promise => {\n return new Promise((resolve) => {\n setTimeout(() => {\n const filtered = MOCK_DATA.filter((item) =>\n item.toLowerCase().includes(query.toLowerCase())\n );\n resolve(filtered);\n }, 300); // Simulate 300ms network latency\n });\n};\n\nexport default function Autocomplete() {\n const [query, setQuery] = useState(\"\");\n const [suggestions, setSuggestions] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1); // -1 means nothing selected\n\n const dropdownRef = useRef(null);\n \n // Use our custom hook! Wait 500ms after typing stops.\n const debouncedQuery = useDebounce(query, 500);\n\n // ... effect logic will go here\n // ... render JSX will go here\n}\n\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "step-3-fetching-data-with-effects", children: _jsx(_components.strong, { children: "Step 3: Fetching Data with Effects" }) }), "\n", _jsxs(_components.p, { children: ["We use ", _jsx(_components.code, { children: "useEffect" }), " to trigger the data fetch whenever the ", _jsx(_components.code, { children: "debouncedQuery" }), " changes."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// components/Autocomplete.tsx (continued)\n\n useEffect(() => {\n // Don't search for empty strings\n if (!debouncedQuery) {\n setSuggestions([]);\n setIsOpen(false);\n return;\n }\n\n const fetchData = async () => {\n setIsLoading(true);\n try {\n const results = await mockApiSearch(debouncedQuery);\n setSuggestions(results);\n setIsOpen(true);\n setActiveIndex(-1); // Reset keyboard selection on new search\n } catch (error) {\n console.error(\"Error fetching data:\", error);\n setSuggestions([]);\n } finally {\n setIsLoading(false);\n }\n };\n\n fetchData();\n }, [debouncedQuery]);\n\n\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "step-4-handling-keyboard-navigation-ux-gold", children: _jsx(_components.strong, { children: "Step 4: Handling Keyboard Navigation (UX Gold)" }) }), "\n", _jsxs(_components.p, { children: ["A good autocomplete allows users to keep their hands on the keyboard. We need to handle ", _jsx(_components.code, { children: "ArrowDown" }), ", ", _jsx(_components.code, { children: "ArrowUp" }), ", and ", _jsx(_components.code, { children: "Enter" }), "."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// components/Autocomplete.tsx (continued)\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!isOpen || suggestions.length === 0) return;\n\n if (e.key === \"ArrowDown\") {\n e.preventDefault(); // Prevent cursor moving in input\n // Cycle down, loop back to top if at bottom\n setActiveIndex((prev) => (prev < suggestions.length - 1 ? prev + 1 : 0));\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n // Cycle up, loop to bottom if at top\n setActiveIndex((prev) => (prev > 0 ? prev - 1 : suggestions.length - 1));\n } else if (e.key === \"Enter\" && activeIndex >= 0) {\n // Select the active item\n handleSelect(suggestions[activeIndex]);\n } else if (e.key === \"Escape\") {\n setIsOpen(false);\n }\n };\n\n const handleSelect = (value: string) => {\n setQuery(value);\n setIsOpen(false);\n setActiveIndex(-1);\n // Optionally trigger an onSelect callback prop here\n console.log(\"Selected:\", value);\n };\n\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "step-5-putting-it-together-the-jsx--tailwind", children: _jsx(_components.strong, { children: "Step 5: Putting it together (The JSX & Tailwind)" }) }), "\n", _jsxs(_components.p, { children: ["Now we render the input and the conditional dropdown list, applying styles to highlight the ", _jsx(_components.code, { children: "activeIndex" }), "."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// components/Autocomplete.tsx (Final Render part)\n\n return (\n // Use ref for \"click outside\" detection later\n

\n Search\n

\n setQuery(e.target.value)}\n onKeyDown={handleKeyDown}\n onFocus={() => query && setIsOpen(true)}\n placeholder=\"Search technologies...\"\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition\"\n autoComplete=\"off\"\n // A11y attributes\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-expanded={isOpen}\n aria-controls=\"autocomplete-list\"\n aria-activedescendant={activeIndex >= 0 ? `item-${activeIndex}` : undefined}\n />\n {/* Loading spinner icon */}\n {isLoading && (\n

\n {/* Simple SVG Spinner */}\n \n

\n )}\n

\n\n {/* Results Dropdown */}\n {isOpen && suggestions.length > 0 && (\n

handleSelect(item)}\n // Conditional styling based on activeIndex\n className={`px-4 py-2 cursor-pointer transition ${\n index === activeIndex\n ? \"bg-blue-100 text-blue-800\" // Highlighted state\n : \"text-gray-700 hover:bg-gray-50\" // Normal state\n }`}\n // Handle mouse hover interaction mixed with keyboard interaction\n onMouseEnter={() => setActiveIndex(index)}\n >\n {item}\n \n ))}\n

\n )}\n \n {/* No results state */}\n {isOpen && !isLoading && query && suggestions.length === 0 && (\n

\n No results found for \"{query}\"\n

\n )}\n

\n );\n\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "bonus-step-handling-outside-clicks", children: _jsx(_components.strong, { children: "Bonus Step: Handling Outside Clicks" }) }), "\n", _jsxs(_components.p, { children: ["A polished component closes when you click somewhere else on the page. We use the ", _jsx(_components.code, { children: "dropdownRef" }), " and a global event listener for this."] }), "\n", _jsxs(_components.p, { children: ["Add this to your component's ", _jsx(_components.code, { children: "useEffect" }), " block:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: " // Close dropdown when clicking outside\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n dropdownRef.current && \n !dropdownRef.current.contains(event.target as Node)\n ) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n // Important cleanup!\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, []);\n\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { id: "conclusion", children: _jsx(_components.strong, { children: "Conclusion" }) }), "\n", _jsx(_components.p, { children: "We have successfully built a production-ready Autocomplete component." }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Performant:" }), " It uses ", _jsx(_components.code, { children: "useDebounce" }), " to limit network requests.\n✅ ", _jsx(_components.strong, { children: "Usable:" }), " It supports full keyboard arrow navigation and selection.\n✅ ", _jsx(_components.strong, { children: "Polished:" }), " It handles loading states and outside clicks.\n✅ ", _jsx(_components.strong, { children: "Accessible:" }), " It uses proper ARIA roles for screen readers."] }), "\n", _jsx(_components.p, { children: "This approach provides a solid foundation that you can easily extend to handle complex objects instead of strings, connect to a real backend API, or integrate with form libraries like React Hook Form." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Share this article

Table of Contents9 items