Jquery Search And Display Images Based On Class

I'd like to be able to search and display these based on the class attributes, such as 'kitchen'. I can't find anything on searching by the class, only text and such. Or if anyone

Solution 1:

So first, thing, remove all the duplicate ID's all over the place. That will only cause headaches. ID's are unique identifiers. Second, see the below. Pretty well commented. It IS case sensitive.

// then, on entering text...
  $("#filter").on("keyup", function() {
  if ($(this).val().length > 0) {
    // hide everything,
    $(".item").hide();
    // get the text in the inputvar mySelector = $(this).val();
    // show any class that contains the inputvar myImgs = $("[class*='"+mySelector+"' i]");
    myImgs.show();
  } else {
    $(".item").show();
  }

  });

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formid="live-search"method="post"><fieldset><inputtype="text"class="text-input"id="filter" /><spanid="filter-count"></span></fieldset></form><br/><br/><divid="gallery"><divid="image-1"class="item #1 Category-Home Home"><atarget="_blank"ahref=""><imgclass="img_item"><imgsrc="http://placehold.it/150x150" /></a></div><divid="image-2"class="item #2 Category-Kitchen Kitchen"><atarget="_blank"ahref=""><imgclass="img_item"><imgsrc="http://placehold.it/150x150" /></a></div><divid="image-3"class="item #3 Category-Outdoors Outdoors"><atarget="_blank"ahref=""><imgclass="img_item"><imgsrc="http://placehold.it/150x150" /></a></div></div><divid="image-4"class="item #4 Category-Sports Sports"><atarget="_blank"ahref=""><imgclass="img_item"><imgsrc="http://placehold.it/150x150" /></a></div>

Your comment about case insensitivity made me curious. If you google jquery attribute selector case insensitivity, there is a lot of cool stuff to be found. The most simple solution was to change the selector, as above -- note that there is now a

$("[class*='"+mySelector+"' i]")

The i on the tail of the selector indicates case insensitivity.

FURTHER CHANGES -- now, when the input has no value, all image divs are shown. And, by default, they're all visible.

Solution 2:

I removed all id, but added classes into divs attr. Below is working solution (case insensitive). Also I changed Your images a little bit, for You can see difference.

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formid="live-search"method="post"><fieldset><inputtype="text"class="text-input"id="filter" /><spanid="filter-count"></span></fieldset></form><br/><br/><divid="gallery"><divclass="item #1 Category-Home Home"><aid="#image-link"target="_blank"ahref=""><imgclass="img_item"><imgsrc="http://placehold.it/150x151" /></a></div><divclass="item #2 Category-Kitchen Kitchen"><aid="#image-link"target="_blank"ahref=""><imgclass="img_item"><imgsrc="http://placehold.it/150x152" /></a></div><divclass="item #3 Category-Outdoors Outdoors"><aid="#image-link"target="_blank"ahref=""><imgclass="img_item"><imgsrc="http://placehold.it/150x153" /></a></div><divclass="item #4 Category-Sports Sports"><aid="#image-link"target="_blank"ahref=""><imgclass="img_item"><imgsrc="http://placehold.it/150x154" /></a></div></div>

Solution 3:

1) You have ids repeated, ids are unique, I have changed them to class

2) You have: <img class="img_item"><img src="http://placehold.it/150x150" /> The first img tag doesn't contain and image, either change it to a div (dont forget to close it) or just remove it. (In below example i changed to div)

3) Rather than using a class it makes more sense to use the data attribute. I have added a data attribute to each .item.

4) Using jQuery, we can loop through each item and check if the data-category contains the value of the search field. If it doesn't we hide it.

5) If the search box is empty, we show everything.

Hope this helps.

$("#filter").keyup(function() {
  filterString = $("#filter").val().toLowerCase();
  if (filterString.length < 1) {
    //alert("showing all");
    $(".item").slideDown('slow');
  } else {
    $(".item").each(function() {
      if ($(this).data("category").toLowerCase().indexOf(filterString) == -1) {
        $(this).slideUp('slow');
      } else {
        $(this).slideDown('slow');
      }
    });
  }
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><formid="live-search"method="post"><fieldset><inputtype="text"class="text-input"id="filter" /><spanid="filter-count"></span></fieldset></form><br/><br/><divid="gallery"><divclass="item"data-category="Home"><aclass="#image-link"target="_blank"ahref=""><divclass="img_item"><imgsrc="http://placehold.it/150x150" /></div></a></div><divclass="item"data-category="Kitchen"><aclass="#image-link"target="_blank"ahref=""><divclass="img_item"><imgsrc="http://placehold.it/150x150" /></div></a></div><divclass="item"data-category="Outdoors"><aclass="#image-link"target="_blank"ahref=""><divclass="img_item"><imgsrc="http://placehold.it/150x150" /></div></a></div><divclass="item"data-category="Sports"><aclass="#image-link"target="_blank"ahref=""><divclass="img_item"><imgsrc="http://placehold.it/150x150" /></div></a></div></div>