Autocomplete (Offline)

Difficulty: Advanced

Problem Statement

Filter local suggestions list as user types.

Live Demo

Try the running app below — this is the target behavior for the challenge.

Autocomplete (Offline) — Live Demo

What Interviewers Expect

• Controlled input.
• Case-insensitive filtering.
• Empty state when no matches.

Step-by-Step Implementation

Step 1 — Controlled search term

Bind input value to state.

const [term, setTerm] = useState('');

Step 2 — Derived results

Use useMemo to filter suggestions.

return COUNTRIES.filter((c) => c.toLowerCase().includes(q));

Complete Implementation

Copy-paste ready single-file solution. Use this as your reference after attempting the challenge yourself, or paste it into CodeSandbox / StackBlitz to run locally.

App.jsx

import React, {useMemo, useState} from 'react';

const COUNTRIES = ['India', 'Indonesia', 'Ireland', 'Israel', 'Italy', 'Japan', 'Jordan'];

export default function App() {
  const [term, setTerm] = useState('');

  const results = useMemo(() => {
    if (!term.trim()) return [];
    const query = term.toLowerCase();
    return COUNTRIES.filter((country) => country.toLowerCase().includes(query));
  }, [term]);

  return (
    <div>
      <input
        value={term}
        onChange={(e) => setTerm(e.target.value)}
        placeholder="Search country"
      />
      <ul>
        {results.map((country) => (
          <li key={country}>{country}</li>
        ))}
      </ul>
    </div>
  );
}

Final Checklist

• UI works for primary flow
• Edge cases handled (empty/disabled/loading where relevant)
• State updates are immutable
• Components are readable and reasonably split
• You can explain trade-offs out loud in an interview

Next Challenge

Continue to the next item in the sidebar when you're comfortable implementing this from scratch in 30–45 minutes.