Filters on websites are mostly used for finding particular items and information. Filters are used to ease the environment for the user so that they can easily find the relevant information. The filter uses some predefined keywords and other data in the javascript dictionary, and then, by using the javascript function, we provided them either with filters that are most common or a search bar where the user needs to type at least 3 characters to find the related information.
This type of project is mostly used on big e-commerce websites where customers need to find a particular product from the list of products. In this article, we will create a search filter project using javascript, a complete working project that uses javascript functions to add filters, either using keywords or just by adding filters through a predefined drop-down menu option.
Let’s take a look at the live project so that it gives us an idea of what we are going to create in our project.
Before we start with our project, let us understand some of the important topics about search filters.
30+ Javascript Projects with Source Code
What is a Search Filter?
A search filter is a type of javascript function that uses keywords, and using javascript while conditions, we check the keyword matching and then display the result to the user.
Adding the Structure(HTML):
First of all, we will create a container for our search filter using the <div> tag, and then inside our container, we will create a child container, inside which we will create a row section where, using the form tag, we will create a form with a search bar using the input search and a button for searching for products.
Now we will create another section with an ID filter where, using the form tag, we will create four different types of search filter drop-down menus where we will add different filtering parameters.
<div class="container"> <div class="row" id="search"> <form id="search-form" action="" method="POST" enctype="multipart/form-data"> <div class="form-group col-xs-9"> <input class="form-control" type="text" placeholder="Search" /> </div> <div class="form-group col-xs-3"> <button type="submit" class="btn btn-block btn-primary">Search</button> </div> </form> </div> <div class="row" id="filter"> <form> <div class="form-group col-sm-3 col-xs-6"> <select data-filter="make" class="filter-make filter form-control"> <option value="">Select Make</option> <option value="">Show All</option> </select> </div> <div class="form-group col-sm-3 col-xs-6"> <select data-filter="model" class="filter-model filter form-control"> <option value="">Select Model</option> <option value="">Show All</option> </select> </div> <div class="form-group col-sm-3 col-xs-6"> <select data-filter="type" class="filter-type filter form-control"> <option value="">Select Type</option> <option value="">Show All</option> </select> </div> <div class="form-group col-sm-3 col-xs-6"> <select data-filter="price" class="filter-price filter form-control"> <option value="">Select Price Range</option> <option value="">Show All</option> </select> </div> </form> </div> <div class="row" id="products"> </div> </div>
Styling (CSS):
Here in our project, we have used a CSS framework for adding the styling inside our project. Using the bootstrap classes, we have added predefined styling for different elements. We have added a class for styling each element with different bootstrap classes. To add those stylings to your project, you need to add the bootstrap link in the header section of your HTML file.
We will be adding some additions and basic styling to our project using CSS.
Basic Styling:
Using the body tag selector, we will add a 30px padding at the top of the body of the webpage. and using the class selector property, we will add a bottom margin to each element inside the product class. We will add a bottom margin of 30 pixels, and we will also be adding a box shadow to our project. Now using the child class selector, we will be adding a margin from the bottom in an image of 10 pixels for better user visibility and a clear design of our search filter.
body {
padding-top: 30px;
}
.product {
margin-bottom: 30px;
}
.product-inner {
box-shadow: 0 0 10px rgba(0,0,0,.2);
padding: 10px;
}
.product img {
margin-bottom: 10px;
}
Now we have added some styling and spacing to our search filter. Now, using JavaScript, we will be listing the different products along with their images and different JavaScript functions that help add functionality to our search filter using JavaScript.
Adding Javascript:
Creating array:
We will create an array of similar product items. We will add similar products along with the images and information about the product. We will be using the var keyword to create an array of product items.
var data = [
{
"make": "Gibson",
"model": "Les Paul",
"type": "Electric",
"price": "$3,000",
"image": "http://www.sweetwater.com/images/items/120/LPST5HTHDCH-medium.jpg?9782bd"
},
{
"make": "Gibson",
"model": "SG",
"type": "Electric",
"price": "$1,500",
"image": "http://www.sweetwater.com/images/items/120/SGSEBCH-medium.jpg?e69cfe"
},
{
"make": "Fender",
"model": "Telecaster",
"type": "Electric",
"price": "$2,000",
"image": "http://www.sweetwater.com/images/items/120/TelePLMPHB-medium.jpg?28e48b"
},
{
"make": "Fender",
"model": "Stratocaster",
"type": "Electric",
"price": "$2,000",
"image": "http://www.sweetwater.com/images/items/120/StratAMM3SB2-medium.jpg?dfd0a9"
},
{
"make": "Gretsch",
"model": "White Falcon",
"type": "Electric",
"price": "$5,000",
"image": "http://www.sweetwater.com/images/items/120/G613655GE-medium.jpg?9bfb0e"
},
{
"make": "Paul Reed Smith",
"model": "Custom 24",
"type": "Electric",
"price": "$5,000",
"image": "http://www.sweetwater.com/images/items/120/HBII10BGWB-medium.jpg?982763"
},
{
"make": "Gibson",
"model": "Hummingbird",
"type": "Acoustic",
"price": "$2,500",
"image": "http://www.sweetwater.com/images/items/120/SSHBHCNP-medium.jpg?11fbea"
}
];Creating Drop Down Menu:
First of all, we will create different empty variables using the var key. We will create variables like products, makes, models, and types.
Now, using the for keyword, we will create a loop where we will initialize the value of i from zero, and we will keep on increasing the data length. Using the var keyword, we will create a make variable and store the value in different variables.
We will create product cards using the styling through HTML and CSS inside the javscipt. We will create a container for our product cards and then use the bootstrap classes inside the element.
var products = "",
makes = "",
models = "",
types = "";
for (var i = 0; i < data.length; i++) {
var make = data[i].make,
model = data[i].model,
type = data[i].type,
price = data[i].price,
rawPrice = price.replace("$",""),
rawPrice = parseInt(rawPrice.replace(",","")),
image = data[i].image;
//create product cards
products += "<div class='col-sm-4 product' data-make='" + make + "' data-model='" + model + "' data-type='" + type + "' data-price='" + rawPrice + "'><div class='product-inner text-center'><img src='" + image + "'><br />Make: " + make + "<br />Model: " + model + "<br />Type: " + type + "<br />Price: " + price + "</div></div>";
//create dropdown of makes
if (makes.indexOf("<option value='" + make + "'>" + make + "</option>") == -1) {
makes += "<option value='" + make + "'>" + make + "</option>";
}
//create dropdown of models
if (models.indexOf("<option value='" + model+"'>" + model + "</option>") == -1) {
models += "<option value='" + model + "'>" + model + "</option>";
}
//create dropdown of types
if (types.indexOf("<option value='" + type + "'>" + type + "</option>") == -1) {
types += "<option value='" + type + "'>" + type + "</option>";
}
}Selecting HTML Elements:
Using the ID selector, we will select the product element and then add the data about the product to the product elements. Similarly, we will select the different elements using classes or IDs, then append the data relevant to the particular HTML container.
$("#products").html(products);
$(".filter-make").append(makes);
$(".filter-model").append(models);
$(".filter-type").append(types);
Filtering and Search Functionality:
We will create a dynamic search filter where we use the updatefilter function, and as the user selects any particular keyword or filter from the drop-down menu, the filter is updated into the data, and using CSS, we hide all the other irrelevant items and display the product with particular keywords.
Build a Weather App Using HTML, CSS, and JavaScript in 3 Easy Steps
Similarly, we will be using the search keyword functionality, in which we take the input from the user, convert all the text to capital letters, and use the if else condition to match the product names just by typing the first three characters. If the product is related to the keywords found, then it is displayed to the user, and other products get hidden again.
var filtersObject = {};
//on filter change
$(".filter").on("change",function() {
var filterName = $(this).data("filter"),
filterVal = $(this).val();
if (filterVal == "") {
delete filtersObject[filterName];
} else {
filtersObject[filterName] = filterVal;
}
var filters = "";
for (var key in filtersObject) {
if (filtersObject.hasOwnProperty(key)) {
filters += "[data-"+key+"='"+filtersObject[key]+"']";
}
}
if (filters == "") {
$(".product").show();
} else {
$(".product").hide();
$(".product").hide().filter(filters).show();
}
});
//on search form submit
$("#search-form").submit(function(e) {
e.preventDefault();
var query = $("#search-form input").val().toLowerCase();
$(".product").hide();
$(".product").each(function() {
var make = $(this).data("make").toLowerCase(),
model = $(this).data("model").toLowerCase(),
type = $(this).data("type").toLowerCase();
if (make.indexOf(query) > -1 || model.indexOf(query) > -1 || type.indexOf(query) > -1) {
$(this).show();
}
});
});Final Video Output:
Conclusion:
Hopefully, the above tutorial has helped you to know how to create this Search Filter Using Javascript.
Here we have learned how to use a Search Filter Using Javascript. Next time, I am going to write an article on how to create a welcome page using HTML and CSS. Please give us your valuable feedback on how you like this Search Filter Using Javascript.
If you like the project, don’t forget to follow our website, foolishdeveloper.com.
Codepen by: lr
Author: Arun
