I have created this article to let everyone be part in knowing how a seamless search can be achieved using:
In this article, we will learn:
- Es6 functions/syntax
- How to filter an item(s) from an array
- Best code practices
cd Desktopmkdir seamless_filteringcd seamless_filteringtouch index.html index.jscode .
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:
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.
In your index.js add the following:
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:
If you have done this, open the index.html file, right before the index.js script tag, add the following:
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:
Let us view our browser to see how far we have gone.
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.
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;
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:
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.