Build an Autocomplete Search Component in React and TypeScript

How to show suggestions of data from an API Rest

Nowadays, one of the most widely used components of a website is the search engines with autocomplete or suggestions.

It is usually the first component with which the user interacts since it is more practical to perform a search and go directly to what we need. These components are essential in sites such as e-commerce for a good user experience.

In this tutorial, we will build a simple search component that offers users suggestions about what they are typing without third-party libraries.

What is Autocomplete Search?

Autocomplete is a pattern used to display query suggestions.

An autocomplete search, also called “predictive search” or “autosuggest,” is a component that the user types in the input field that will suggest various predictions or possible results of how the search might be completed.

Autocomplete works with a search engine that learns and improves the suggested results as it is fed by the searches its users perform.

In this case, we will not see more about search engines because it is out of the scope of the tutorial. If you want to learn more about this topic, you can look at this site. Without further ado, let’s get to programming.

Setting Up Autocomplete search

We create our application with vite with the following command:

yarn create vite autocomplete-search --template react-ts

We install the dependencies that we will need in the project:

yarn add @nextui-org/react

In this case, I am only going to use a third-party library for the styles you can use whatever you want:

• nextui a Javascript/CSS framework

After that, we create the following folder structure for the project:

src/
├── components/
│   └── ui/
│       ├── Autocomplete.tsx
│       ├── Autocomplete.tsx
│       ├── index.ts
│       └── ui.module.css
├── hooks/
│   └── useAutocomplete.ts
├── ts/
│   └──interfaces/
│      └──…