html ecommerece search box
<div class="row">
<div class="left" style="background-color:transparent;">
<h3 style="text-align: center;">Plants</h3>
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">
<ul id="myMenu">
<li><a href="#">Edible Plants <p style="color: red;">60% off</p></a></li>
<li><a href="#">Saplings <p style="color: red;">40% off</p></a></li>
<li><a href="#">Small Plants</a></li>
<li><a href="#">Leaf Plants</a></li>
<li><a href="#">Flower Plants</a></li>
</ul>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background: #9909;
}
* {
box-sizing: 10px;
}
.row {
width: 500px;
}
/* Left column (menu) */
.left {
flex: 10%;
padding: 15px 0;
}
.left h2 {
padding-left: 8px;
}
/* Style the search box */
#mySearch {
width: 95%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
}
/* Style the navigation menu inside the left column */
#myMenu {
padding: 1;
margin: 0;
}
#myMenu li a {
padding: 10px;
text-decoration: none;
font-size: 10px;
color: black;
display: block;
}
#myMenu li a:hover {
background-color: #eee;
}
</style>
<style>
.product{
width: 100%;
max-width: 400px;
height: auto;
border: 5px solid #555;
border-radius: 10px;
}
.product:hover{
padding-left: 25px;
box-shadow: 5px white;
}
</style>
<script>
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul = document.getElementById("myMenu");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>