Create auto-suggest search/filter using Javascript And React

As we know, we have Autocomplete from material-ui / antd, react-autocomplete dependency and so many other third party libraries. But without using those, we can create a search or filter using Javascript, same like Google search where the suggested words will be in bold and the searched value will be in normal font. We can use this search/filter in so many places like filtering a data-grid or searching something from multiple cards rendered in UI.

For example, we are about to create search / filter like the below one:

Before starting the code, let’s concentrate on the code flow. So first of all we will have a data source which will be an array. On page load / after receiving data in the component, keep a separate copy of the data. On Change of search / filter input, call a function and pass the event. Based on entered value filter out the data from the actual data and render it as a suggestion list on the screen. On click of any item from suggestion list, do the actual filter and render that on screen. While clearing out filter, replace the table or cards with the previous copied whole data.

Ok, now let’s start coding. I use react.js, material-ui for styling and font awesome for icons in this project. So to start with you can run following command to create a react application and enable material ui

1. create-react-app search-filter
2. npm install @material-ui/core (inside the root directory)
3. npm install @material-ui/data-grid (inside the root directory)
4. npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons (inside the root directory)

Once the project setup is done first create a data source inside src/component folder.

Let’s create a component where we will display the above data in Tabular format. Also add a filter text-field where we can provide some input and based on the input we will filter the table data.

Create 2 functions, one for applying filter and another one for clearing filter.

We will call applyFilter function onChange of text-field and will pass the event. Then we will initiate a blank suggestion array in it.

If some value in text-field is present, we will filter out the data which is having similar word(s) of entered value in text-field. We will use .filter and .includes functions from javascript. Also one thing we have to remember, some of the data can have an uppercase letter at starting. So we have to convert all the string to lowercase as well as we have to convert entered value to lowercase to make the search effective. Finally, we have to push all the filtered data along with its type to the previously initiated blank array.

If the input field is cleared manually, we have to reset the suggestion array and also replace table data with the copy of whole data. It is better to maintain suggestion array in a local state so that based on its availability we can render suggestion list.

Now, we have the suggestion array and the type of suggestion (for e.g, if it is a Dish or Cuisine or Ingredient). We have modified the suggested value and add the type of suggestion while filtering. Based on suggestion list availability, we can render the actual List.

While rendering the list, we have to follow some rules.

1. Take out the type of suggestion from each String using .split function and display it below the actual suggestion
2. While displaying the actual suggestion, split it again. Now using that, we can compare if the value which is present in the search-box is similar with the same position of actual suggestion string. If yes, then display it in a lighter font, else display it in a bolder font.

On click of the suggestion from that list, now we have to filter the actual value from that table data. We create filterData function and passing the value. We have to filter out using .filter function. After filtering out the actual data, we have to replace the table data with that filtered data. So, our actual filtering is also working. Also make sure, you clear the suggestion list on click of any suggestion so that the displaySuggestions become null again.

Now, our suggestion list and on click of suggestion filtering is working. We need to work on clear filter. One cross button is present at the end of the search box. On click of that, we can call clearFilter function. This function will clear the suggestion list and will replace the table data with the copy of whole data.

In this way, we can create our own autosuggest search like google search using plain Javascript.

Please find the GitHub repository below.

SaswataRakshit/search-filter