How to implement the search function on images without a database

advertisements

Hi I am trying to write a code that will allow the user to search a book name and make only that book with that specific name appear. But for some reason the search function doesn't work

This is my code 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>

There are a couple of changes to be done as part of the script

<script type="text/javascript">
    $(document).on("click","#search",function(e){
           var search = $("#search-criteria");
           var items  = $(".review-img");
           var v = search.val().toLowerCase();
           if(v == "") {
              items.show();
              return;
           }
           $.each(items, function(){
               var it = $(this);
               var lb = it.attr("id").toLowerCase();
               console.log( lb + " --- " + v);
               if(lb===v)
                    it.show();
                else
                    it.hide();
           });

      });
    </script>

This should work fine. Also remove onClick from the input button as we are going to perform search based on id of the button.

Please ask me if you need any other clarifications on this code