/Javascript/jQuery/Input search picture jquery

Input search picture jquery

$(document).ready(function() {
  var images = $(".item") //contain all unfiltered images
  $("#filter").on("change paste keyup", function(){
  	$.each(images, function(i, l){
  		$(l).hide();
  	}); //hide all images
  	searchValue = $("#filter").val(); //get entered value of input field
    searchValueRE = new RegExp(searchValue, "i"); //convert search value into RegExp
    output = $.grep(images, function (n) {return searchValueRE.test(n.className); }); //Returns array that matches input value
    $.each(output, function(i, l){
  		$(l).show();
  	}); //show matched images
  });
});

Source: stackoverflow.com

Input search picture jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="live-search" method="post">
  <fieldset>
    <input type="text" class="text-input" id="filter" />
    <span id="filter-count"></span>
  </fieldset>
</form>

<br/>
<br/>

<div id="gallery">
  <div class="item #1 Category-Home Home">
    <a id="#image-link" target="_blank" a href="">
      <img class="img_item"><img src="http://placehold.it/150x151" />

    </a>
  </div>
  <div class="item #2 Category-Kitchen Kitchen">
    <a id="#image-link" target="_blank" a href="">
      <img class="img_item"><img src="http://placehold.it/150x152" />

    </a>
  </div>
    <div class="item #3 Category-Outdoors Outdoors">
      <a id="#image-link" target="_blank" a href="">
        <img class="img_item"><img src="http://placehold.it/150x153" />

      </a>
    </div>
  <div class="item #4 Category-Sports Sports">
    <a id="#image-link" target="_blank" a href="">
      <img class="img_item"><img src="http://placehold.it/150x154" />

    </a>
  </div>
</div>

Source: stackoverflow.com

Similar codes

-1 vote197 views3 answers
Jquery json to table
Javascript jQuery
28 votes204 views6 answers
Jquery get data attribute value
Javascript jQuery
0 vote180 views1 answer
Reload page jquery timer
Javascript jQuery
30 votes238 views6 answers
Find element with data attribute jquery
Javascript jQuery
13 votes181 views3 answers
Get text in select jquery
Javascript jQuery
0 vote184 views1 answer
Data-toggle="tooltip not working due to jquery-ui.min.js
Javascript jQuery
0 vote184 views1 answer
Wild card select jquery
Javascript jQuery
2 votes181 views2 answers
Jquery get height of element
Javascript jQuery
0 vote177 views1 answer
Jquery on load vs ready
Javascript jQuery
0 vote261 views1 answer
Jquery OR operator
Javascript jQuery