CODEWITHSUNDEEP
javascriptjqueryhtml
eozzy
eozzy

Reputation: 68650

Filtering elements using jQuery

HTMl and JS:

$('select').on('change', function(e) {

  var filters = {};
  $('select').each(function(index, select) {
    var value = String($(select).val());
    // if comma separated
    if (value.indexOf(',') !== -1) {
      value = value.split(',');
    }
    filters[$(select).attr('name')] = value;
  });

  $('li').each(function(i, item) {

    var show = true;
    $.each(filters, function(name, val) {
      if (val === "null") {
        return;
      }
      if (name === 'author' && $(item).data('author').indexOf(val) === -1) {
        show = false;
      } else($(item).data(name) !== val) {
        show = false;
      }
    });

    if (show) {
      $(item).show();
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id="filters">
  <select name="tag">
        <option value="Tag1">Tag1</option>
        <option value="Tag2">Tag2</option>
      </select>
  <select name="author">
        <option value="John Appleseed">John Appleseed</option>
        <option value="Lisa Hayden">Lisa Hayden</option>
        <option value="Trevor McGregor">Trevor McGregor</option>  
      </select>
</form>

<ul class="list">
  <li data-tag="Tag1" data-author="John Appleseed">Item 1</li>
  <li data-tag="Tag2" data-author="Lisa Hayden">Item 2</li>
  <li data-tag="Tag1,Tag3" data-author="Trevor McGregor">Item 3</li>
</ul>

I'm trying to make filters work on a list. What I basically need is to show the divs based on selection. I'm able to get individual filters working but not all of them together (eg. if author is x and contains tag .. show else hide)

Upvotes: 1

Views: 887

Answers (2)

Abdullah Shoaib
Abdullah Shoaib

Reputation: 464

    $('select').on('change', function(e) {

      var filters = {};
      $('select').each(function(index, select) {
          var value = String($(select).val());
          // if comma separated
          if (value.indexOf(',') !== -1) {
              value = value.split(',');
          }
          filters[$(select).attr('name')] = value;
      });

      $('li').each(function(i, item) {

          var show = true;
          $.each(filters, function(name, val) {
              if (val === "null") { return; }

              if (name === 'author' && $(item).data('author').indexOf(val) === -1) {
                  show = false;
              } else if( $(item).data(name).indexOf(val) === -1) {
                  show = false;
              }
          });

          if (show) {
              $(item).show();
          }else{
              $(item).hide();
          }
      });

    });
<form id="filters">
  <select name="tag">
    <option value="Tag1">Tag1</option>
    <option value="Tag2">Tag2</option>
    <option value="Tag3">Tag3</option>
  </select>
  <select name="author">
    <option value="John Appleseed">John Appleseed</option>
    <option value="Lisa Hayden">Lisa Hayden</option>
    <option value="Trevor McGregor">Trevor McGregor</option>  
  </select>
</form>

<ul class="list">
  <li data-tag="Tag1" data-author="John Appleseed">Item 1</li>
  <li data-tag="Tag2" data-author="Lisa Hayden">Item 2</li>
  <li data-tag="Tag1,Tag3" data-author="Trevor McGregor">Item 3</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

There was an errors in your script:

Replace this line 

} else($(item).data(name) !== val) {

with this line

} else if( $(item).data(name).indexOf(val) === -1) {

Upvotes: 2

guest271314
guest271314

Reputation: 1

You can use .filter() and .indexOf() to filter and .show() only elements where both data-* attributes match, .siblings() to .hide() elements that are not matched

var select = $("select").on("change", function(e) {
  var filtered = li.filter(function(i, el) {
    return this.dataset.tag
          .indexOf(select.filter("[name=tag]").val()) > -1 
           && this.dataset.author
              .indexOf(select.filter("[name=author]").val()) > -1 
   });
   if (filtered.length) filtered.show().siblings().hide();
   else li.hide();
});

var li = $(".list li").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<form id="filters">
  <select name="tag">
    <option value="Tag1">Tag1</option>
    <option value="Tag2">Tag2</option>
    <option value="Tag3">Tag3</option>
  </select>
  <select name="author">
    <option value="John Appleseed">John Appleseed</option>
    <option value="Lisa Hayden">Lisa Hayden</option>
    <option value="Trevor McGregor">Trevor McGregor</option>  
  </select>
</form>

<ul class="list">
  <li data-tag="Tag1" data-author="John Appleseed">Item 1</li>
  <li data-tag="Tag2" data-author="Lisa Hayden">Item 2</li>
  <li data-tag="Tag1,Tag3" data-author="Trevor McGregor">Item 3</li>
</ul>

Upvotes: 1

Related Questions