About

An auto complete component built with react and typescript. The component is built with the following features in mind:

• Suggestions after two characters [ uses include method of matching ]
• Highlighting of matched text
• Clear suggestions/listdrop on blur
• Clear suggestions/listdrop with the escape key
• Has debounce functionality

App state visualization

The diagram below shows the visualization of the state and transitions for the auto-complete component. State transitions are driven by events and they are finite.

Below is the state machine for the app. Interactive visualization can be viewed from xstate using the code below.

const machine = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        SEARCH: 'loading',
      },
    },
    loading: {
      on: {
        SUCCESS: 'showlist',
        ERROR: 'error',
      },
    },
    showlist: {
      on: {
        SEARCH: 'loading',
        CLEAR: 'idle',
        SELECT_ITEM: 'idle',
      },
    },
    error: {
      on: {
        SEARCH: 'loading',
      },
    },
  },
};

Auto complete view state

idle state

loading state

showlist state

error state

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

Recommendations

Libraries I would have used for production ready app:

• Handle Styling and Basic UI components: Material UI / tailwindcss.
• API and network caching : useQuery / SWR

TODO

• Style the input, droplist, loading and error components
• Add Error boundary
• Add tests

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev