Hey there! I've been working on a code that allows users to search for a book by its name and have only the book with that specific name appear on the page. However, I've run into an issue where the search function doesn't seem to be working properly.
Here's the code I have so far:
var search = $("#search-criteria");
var items = $(".image-wrap");
$("#search").on("click", function(e){
var v = search.val().toLowerCase();
if(v == "") {
items.show();
return;
}
$.each(items, function(){
var it = $(this);
var lb = it.find("id").text().toLowerCase();
console.log( lb + " --- " + v);
if(lb.indexOf(v) == -1)
it.hide();
});
});
}); .review-img {
cursor: pointer;
height: 160px; // height
//width: 30%; // width
} <form>
<div> <input type="text" id="search-criteria" id="searchText"/>
<input type="button" id="search" value="search" onClick="tes();"/> </div>
</form>
<section class='images'>
<img class="review-img" id="lifeofpi" src="https://images-na.ssl-images-amazon.com/images/I/51atapp7YTL._AC_US320_QL65_.jpg" alt="lifeofpi"></img>
<img class="review-img" id="kiterunner" src="https://images-na.ssl-images-amazon.com/images/I/51MtGFNeYjL._AC_US320_QL65_.jpg" alt="kiterunner"></img>
<img class="review-img" id="starwars" src="https://images-na.ssl-images-amazon.com/images/I/51oqkfvEwZL._AC_US320_QL65_.jpg" alt="starwars"></img>
<img class="review-img" id="twilight" src="https://images-na.ssl-images-amazon.com/images/I/41K99+cInvL._AC_US320_QL65_.jpg" alt="twilight"></img>
</section>