Blog-Home

This blog is for everybody that loves technology

Create Filter / Search Product Website By Javascript

search-by-javascipts

Search Product Website By JavaScript





javascript,product page html css javascript,javascript search filter,product slider javascript,product filter with javascript,product filter javascript,javascript search,javascript search bar,search box javascript,javascript live search,search bar javascript for website,product filter and search using javascript,ecommerce website html css javascript,create product search filter in javascript,product page html css,javascript project,product filter




first of all, you have to create a folder, where you want to create a save you file of code and then drag it or open it on your text editor, after that you have to save this file by giving any name with the extension name HTML.




HTML Code

<!DOCTYPE html>
<html>
<head>
<title>search in javascript</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap" rel="stylesheet">

</head>
<body>
<div class="container-fluid">
<div class="container">
<div class="search">
<h1>All Products</h1>
<input type="text" name="" id="find" placeholder="search here...." onkeyup="search()">
</div>
<div class="product-list">
<div class="product">
<img src="https://live.hasthemes.com/html/2/sabujcha-preview/sabujcha/assets/img/product/product-1.jpg">
<h3>Bebe Bloom Tea</h3>
<h4>$100.00 - <del>$120.00</del></h4>
</div>
<div class="product">
<img src="https://live.hasthemes.com/html/2/sabujcha-preview/sabujcha/assets/img/product/product-2.jpg">
<h3>Que Harbal Tea</h3>
<h4>$100.00 - <del>$120.00</del></h4>
</div>
<div class="product">
<img src="https://live.hasthemes.com/html/2/sabujcha-preview/sabujcha/assets/img/product/product-3.jpg">
<h3>Best Friend Tea</h3>
<h4>$100.00 - <del>$120.00</del></h4>
</div>
<div class="product">
<img src="https://live.hasthemes.com/html/2/sabujcha-preview/sabujcha/assets/img/product/product-4.jpg">
<h3>Black Ossum Tea</h3>
<h4>$100.00 - <del>$120.00</del></h4>
</div>
<div class="product">
<img src="https://live.hasthemes.com/html/2/sabujcha-preview/sabujcha/assets/img/product/product-5.jpg">
<h3>Socienty Ice Tea</h3>
<h4>$100.00 - <del>$120.00</del></h4>
</div>
<div class="product">
<img src="https://live.hasthemes.com/html/2/sabujcha-preview/sabujcha/assets/img/product/product-6.jpg">
<h3>Green Tulsi Tea</h3>
<h4>$100.00 - <del>$120.00</del></h4>
</div>
<div class="product">
<img src="https://live.hasthemes.com/html/2/sabujcha-preview/sabujcha/assets/img/product/product-7.jpg">
<h3>Every Spice Tea</h3>
<h4>$100.00 - <del>$120.00</del></h4>
</div>
<div class="product">
<img src="https://live.hasthemes.com/html/2/sabujcha-preview/sabujcha/assets/img/product/product-8.jpg">
<h3>Instant Tea Mix</h3>
<h4>$100.00 - <del>$120.00</del></h4>
</div>
</div>
</div>
</div>
<!-- javascript -->
<script type="text/javascript">
function search() {
let filter = document.getElementById('find').value.toUpperCase();
let item = document.querySelectorAll('.product');
let l = document.getElementsByTagName('h3');
for(var i = 0;i<=l.length;i++){
let a=item[i].getElementsByTagName('h3')[0];
let value=a.innerHTML || a.innerText || a.textContent;
if(value.toUpperCase().indexOf(filter) > -1) {
item[i].style.display="";
}
else
{
item[i].style.display="none";
}
}
}
</script>
</body>
</html>

CSS Code


<style type="text/css">
*
{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
body
{
background: #ddd;
}
.container-fluid
{
width: 100%;
height: auto;
padding: 0px 0px 80px 0px;
}
.container
{
width: 1200px;
height: auto;
margin: auto;
}
.container .search
{
display: flex;
padding: 30px 0px;
justify-content: space-between;
}
.container .search h1
{
letter-spacing: 3px;
display: inline-block;
border-bottom: 2px solid green;
padding-bottom: 10px;
}
.container .search input
{
width: 60%;
padding: 5px 16px;
background: transparent;
border: 1px solid #000;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 3px;
outline: none;
}
.container .search input::placeholder
{
color: green;
font-weight: 500;
}
.container .product-list
{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
text-align: left;
}
.container .product-list .product
{
margin-top: 30px;
}
.container .product-list .product h3
{
padding-top: 5px;
letter-spacing: 2px;
font-size: 22px;
font-weight: 400;
}
.container .product-list .product h4
{
padding: 3px 0px;
color: #48a809;
font-weight: 700;
letter-spacing: 3px;
}
</style>





Here we completed our tutorial.

If you face any problem

please feel free to contact us.

Thanks for reading our post.

More Tag –

filter html table using javascript,search bar javascript,search bar javascript for website,search html table using javascript,javascript,html,table,how search in javascript,javascript search filter,javascript search bar,javascript search box,javascript search bar in hindi,search bar in html in hindi,search bar in javascript in hindi,filter table javascript,filter in javascript in hindi,search box javascript,create search bar in javascript hindi,bar,filter,search,box



Also Read:

Food Website Template in HTML and CSS

Website Designing



1 thought on “Create Filter / Search Product Website By Javascript”

Leave a Comment

Your email address will not be published. Required fields are marked *

WE CREATES WEBSITES

LEARN WEBSITE DESIGNING COURSE
ONLINE

We will teach you html5, css3, photoshop, bootstrap, media query, wordpress, sql, php.

Sandeep Gahlot
My Recent Posts
Scroll to Top