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
1 thought on “Create Filter / Search Product Website By Javascript”
He'll, thanks you so much. I like this search bar design, I support you too.