DEV Community

Cover image for How to implement Search feature using JavaScript
Dheeraj Menon
Dheeraj Menon

Posted on

How to implement Search feature using JavaScript

A search bar is a very common feature used in a wide variety of applications. In this article, I will be walking you through a simple approach to implement the search feature using array methods. Note that there are many ways to do this, and this is just one of them. I will be using the classic to-do list project as my reference, but you can also use this approach in other areas such as searching for a certain post in a blog!

Defining HTML Structure

Our HTML file consists of a single container div. It has 3 sections. The first is our search bar which has a form tag that takes text as input.

search

The next section is an unordered list which contains the list of all todos and the option for deleting them.

todos

The last section consists of a form tag that lets the user add new todos.

PS: You can view the complete code at todo-list. I'm trying to keep only the relevant parts in this article.

The Approach

Whenever a user types in a character in the search form, we will perform a filtering function. For doing this, we will use an event listener that listens to the "keyup" event in the input field of the form.
If we do not get a match to our existing todos, we will hide those todos by applying a class. This class will have a CSS rule that hides its display.

Listen to keyup event

We define a constant "search" to get a reference to the input field of the search form. Now we attach the keyup event to this reference. Every time the user types a letter, we will fire a callback function to get the value of whatever the user has typed until that moment. This value will be stored in a constant "term".

Keyup

We use the trim() method to get rid of any white spaces before or after the todo. Now, we perform the filterTodos() function on the value we obtain i.e "term". Everytime a new key is entered, this function is called.

Filter Todos function

Firstly, we define a constant "list" to get a reference to all the todos.

We use an arrow function that takes the "term" as a parameter. The next step is to filter through the todos and apply classes to the ones that don't match the input term so that we can hide them.
To perform this function, we need the help of Array Methods so we will convert our list into an array.

Now, we can use the array filter method. It will go through all the items taking "todo" as a parameter and fire a callback function for each of them. If the text content of our todos DO NOT(!) contain the term, they will be filtered out. This method will return an array of all the filtered items.

Now, we can cycle through this array using for-each method. We take todo as a parameter and add a "filtered" class for all the items in the array. I have used method chaining here to make the code look a bit cleaner.

Filter todos

There's one thing we have to take care of in this function. What if the user enters a letter that adds the "filtered" class to a todo and then immediately removes that letter? We would need a way to then remove the newly attached "filtered" class. We can achieve this by doing exactly the opposite of above code. If the text content of our todos contain the term, they will be filtered. Then we can cycle through them and remove the "filtered" class.

filter todos

CSS Time

Now that we have applied the "filtered" class to all the items that do not match, we would want the user to not be able to see them. For this, we will simply use the CSS display property of none.

Image description

Summing up

There's one final problem with this that has to be fixed. What if the user inputs an upper case value? "BUY XYZ" will not match to "buy xyz". To fix this, we can convert every value to lower case by using toLowerCase() method and perform our filter todos function only after that.

Since my JavaScript code snippets have been all over the place, here is what everything covered in this article finally looks like after performing the case conversion.

Final Code

Feel free to correct me if I have made any mistakes in this article. Thank you for reading.

Top comments (0)