SEAMLESS SEARCH WITH VANILLA JAVASCRIPT
By: Chime Princewill
Tags: JavaScript, Html5, Es6 Js, Frontend Development, Javascript Tips

Photo by Nathan Dumlao on Unsplash

Being a JavaScript developer, you will agree with me that when building an application, there are times where there is a need to have seamless filtering of an item from a collection of items.

I have created this article to let everyone be part in knowing how a seamless search can be achieved using:

HTML

Javascript

In this article, we will learn:

Es6 functions/syntax

How to filter an item(s) from an array

Best code practices

Moving forward, I will guide us through how to implement this very quest using vanilla JavaScript. I will be using visual studio code as my code editor.

Let us start by creating a folder that will have both the javascript and HTML files in it. On the terminal, navigate to the desktop folder and create the files in it as follows:

cd Desktop mkdir seamless_filtering cd seamless_filtering touch index.html index.js code .

These will take us through creating a folder, files, and open the folder in your visual studio code. Go into the HTML file and add the following:

index.html

This shows a layout of our HTML file. In it, I have created a form field that has one input field and a nav element, where I will be displaying a list of food items that we will be using for the seamless filtering.

Moving forward, let us start adding the logic for this very quest in the index.js file we created earlier. Before the closing tag of the body element, let us add a script tag that will allow our js file to take effect on the HTML file.

index.js script

In your index.js add the following:

handleFoodList

The above is a function that is rendering our list items to the DOM. An argument(foodItems) was passed to the function - it holds an array of the foods we will render to the DOM. Whenever the function runs, we clear the previous values of the unordered list item and set the new value with the argument that is passed to the handleFoodList function.

We have passed an undefined parameter(foodItems) to the handleFoodList function, let us declare and define the variable holding the data. Unlike react.js, a variable can be exported to any component. VanillaJS has a unique way of accessing data collection in a separate file.

Moving on, inside the seamless_filtering folder, create a new file named data.js. Add The following in it:

food collection

If you have done this, open the index.html file, right before the index.js script tag, add the following:

data collection script

The food collection can now be accessed in the index.js file. Inside the index.js file, let’s assign the ul element to a variable and set it at the top level of the file like so:

unordered list reference

Let us view our browser to see how far we have gone.

The food list

The above screenshot shows an input field and lists of all the food items. The big question that we have been waiting for remains how to filter through the food items.

While we make progress, let us create a function that will always return the list of food(s) that was found while the input field is been updated.

filter found collection

This is a function that only filters the found food(s) based on the input value. Like the handleFoodList function, we passed an argument to the handleSearch function as well. This time we passed two arguments, the first is the value that we will be getting from the input field and the second is the food collection.

Moving on, let us create a function that we trigger the search action below;

onInput function

On every update in the input field, this function is called. I destructured the input value from the event object(this), passed it to the handleSearch function as its parameter with the food collection as the second parameter. The handleSearch function is returning the found food(s) and is assigned to the filteredElement variable to be used.

A condition was checked to know if food(s) was found. If yes, the found food is passed as the current parameter of the handleFoodList. If no food was found or the input field is empty, we set the original food collection back to be listed.

Where is the handleOnInput function called? The handleOnInput function will be called in the index.html. Let us go into the file and update it with the following:

on input function

I used one of the input attribute events named oninput to trigger the handleOnInput function each time there is an update in the input field. The this keyword is what gave us the value from the event that we destructured in the handleOnInput function above.

Now that we have all implemented these, let us see what we have built in the following Demo. The source code is available here.

Finally, we have gotten to the end of this article, and I hope everyone can now build an application that filters an item from a collection going forward using vanilla JavaScript.

If this article was helpful to you don’t forget to hit the clap icon, share the article and follow me on my Medium, and Linkedin to see more of my articles.

Kindly drop any comments or suggestions. If you have a topic based on the JavaScript/React.js ecosystem, feel free to reach out and I’d be glad to write on it. Thanks.