Breaking News: Grepper is joining You.com. Read the official announcement!

input search picture jquery

Thy answered on April 1, 2020 Popularity 4/10 Helpfulness 1/10

answer input search picture jquery

related input search picture jquery

input search picture jquery

Comment

$(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
  });
});

Popularity 4/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: input javascript jquery search

Link to this answer
Share Copy Link

Contributed on Apr 01 2020

Thy

0 Answers Avg Quality 2/10

Closely Related Answers

input search picture jquery

Comment

<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>

Popularity 4/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: jquery input javascript search

Link to this answer
Share Copy Link

Contributed on Apr 01 2020

Thy

0 Answers Avg Quality 2/10

input search picture jquery

Contents

More Related Answers

input search picture jquery

Closely Related Answers

input search picture jquery

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.