autocomplete search component with react and typescript

How to show data suggestions from API Rest

Unsplash. photo by Marten Newhall

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

This is usually the first component the user interacts with as it is more practical to search and go straight to what we need. These components are essential in sites like e-commerce for a good user experience.

In this tutorial, we’ll build a simple search component that gives users tips about what they’re typing without third-party libraries.

What is autocomplete search?

Autocomplete is a pattern used to display query suggestions.

An autocomplete search, also known as “predictive search” or “autosuggestion”, is a component that the user types in an input field that suggests various predictions or possible results of how the search might be completed. Will give

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

In this case, we won’t see much about the search engine as it is outside the scope of the tutorial. If you want to know more about this topic, you can visit this site. Without further ado, let’s get to the programming.

set up autocomplete search

We build our application 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’m going to use a third-party library just for the styles you can use:

  • 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/
│ └── Country.interface.ts
├── App.tsx
└── main.tsx

Component

AutocompleteWrapper.tsx This component is only used as a container or wrapper of Autocomplete.tsx and this is where we are going to request the data we need.

We use rest countries API for tutorial and use only English speaking countries so query would be like this:

https://restcountries.com/v3.1/lang/eng

Autocomplete.tsx This is the main component, and it has two sections. The first section is the input element, and the second is the list of suggestions.

usually, a

    either

      Elements is used, but in this tutorial, we will be using the Rows component inside the Next UI Card component.

      https://medium.com/media/0062150539c91ea0a467c1b86c6d4943/href

      First, we create the types we need. The API gives us a huge amount of data that we will not use, so simplifying the information and types would look like this:

      export type Country = {
      name: Name
      flags: Flags
      }
      type Name = {
      common: string
      }
      type Flags = {
      png: string
      svg: string
      }

      After that, we will create the following states:

      searchedValue – Here, we will store the text that the user is typing.

      Suggestions—Here, we will store the suggestions that match what the user has written.

      Selected Suggestion – Here, we will store the option selected by the user.

      Active Suggestions – Here, we will store the index of the suggestions shown. We’ll use this to know which suggestion is selected by the keyboard.

      Now, we need to create functions that will react to the events of the input element and the result list.

      handleChanged() This function will be executed every time the user types something into the input element. If entered we will verify that it is not an empty value. Otherwise, we will set the states to their initial values.

      If the received value in the input element is not empty, the function will be executed and display suggestions that match the entered value.

      handleClick() This function will be executed when the user selects a suggestion; We save the selected value and set the rest of the states to their initial values.

      handleKeyDown() This function will be executed when an event is detected on the keyboard, so you can browse through the suggestions and select one.

      Finally, when the component is mounted we add the util effect to focus the input element.

      That’s all! We already have an autocomplete search that we can use in any project by passing the input context and data to filter.

      As an additional step and good practice, we will move the functionality to a custom hook, and our component will be cleaner and more readable.

      https://medium.com/media/c4ca6e4606109ced678b84b19162d340/hrefhttps://medium.com/media/f59e90bca98f0813ca650494f2587f77/href

      The app looks like this:

      autocomplete search

      View demo here.

      repo

      GitHub – ljaviertovar/autocomplete-search-react-ts: An autocomplete search component

      conclusion

      We have created a simple search component by applying filters to the received data, this search can be more and more complex on a case by case basis. After capturing the selected value, you can add more functionality, such as displaying the details of the selected country.

      I hope this tutorial has been useful to you and you have learned new things in developing this application.

      read more

      • Developing Reusable and Customizable Models with React and TypeScript
      • Why should you use cleanup functions in React’s use effect hook?
      Want to Connect?
      Love connecting with friends all around the world on Twitter.


      The Autocomplete search component with React and TypeScript was originally published in Better Programming on Medium, where people are continuing the conversation by highlighting and giving feedback on this story.

Leave a Comment