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.
The next section is an unordered list which contains the list of all todos and the option for deleting them.
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".
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.
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.
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.
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.
Feel free to correct me if I have made any mistakes in this article. Thank you for reading.
Top comments (0)