AJAX SEARCH IMAGE FIELD ONPAGE USING NAME FIELD
AJAX SEARCH IMAGE FIELD ONPAGE USING NAME FIELD
<!doctype html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="card">
<div class="card-header">
<form action="">
<input type="text" name="srch" id="srch">
<button class="btn btn-primary"> <i class="fa fa-search"> </i></button>
</form>
</div>
<div class="card-body">
<div id="logoImg" class="p-2 d-flex">
<div class="mx-2 bg-dark ">
<img src="img/a.jpg" alt="a" name="a" style="background-color:red; height: 120px;">
</div>
<div class="mx-2 bg-dark">
<img src="img/b.jpg" alt="b" name="b" style="background-color:red; height: 120px;">
</div>
<div class="mx-2 bg-dark">
<img src="img/c.jpg" alt="c" name="c" style="background-color:red; height: 120px;">
</div>
<div class="mx-2 bg-dark">
<img src="img/d.jpeg" alt="d" name="d" style="background-color:red; height: 120px;">
</div>
<div class="mx-2 bg-dark">
<img src="img/e.jpeg" alt="e" name="e" style="background-color:red; height: 120px;">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("img").hide();
$('#srch').on('keyup', function () {
var srch = this.value;
if(srch!="")
$("img[name="+srch+"]").show();
else
$("img").hide();
});
});
</script>
</body>
</html>
Comments
Post a Comment