如何使用jQuery基于多个数据属性筛选列表项？

Question

Here is my HTML with all of my filters:

  <div class="search-filters">
    <div class="filter-block">
      <label for="employee_type">Employee Type</label>
      <select id="employee_type" class="category">
        <option value="0">All</option>
        <option value="designer">Designer</option>
        <option value="manager">Manager</option>
        <option value="developer">Developer</option>
        <option value="quality-assurance">Quality Assurance</option>
      </select>
    </div>
    <div class="filter-block">
      <label for="years_xp">Years Experience</label>
      <select id="years_xp" class="category">
        <option value="0">Select years Experience</option>
        <option value="1">1 year</option>
        <option value="2">2 years</option>
        <option value="3">3 years</option>
      </select>
    </div>

  </div>

And my result list is below:

 <ul class="result-set">
   <li class="result" data-employee-type="designer" data-xp="3" >John Smith</li>
   <li class="result" data-employee-type="manager" data-xp="2" >Billy Joe</li>
   <li class="result" data-employee-type="developer" data-xp="5" >John Appleseed</li>
 </ul>

So what I'm trying to do is filter the results with jQuery using the data attributes and select drop-downs on change. Right now only one or the other filter works with my jQuery code below. I tried using the .filter function in Jquery but it still only works when one drop-down is changed. If I change both it seems to be ignoring one condition.

My jQuery:

var category_filters = [];

$('.category').on('change', function() {
    category_filters = [];

    $('.search-filters select').each(function() {
        if ($(this).val() != 0) {
            var category = $(this).val();
            category_filters[$(this).attr('id')] = category;
        }
    });

    var employee_type = "";
    var years_xp = "";

    if ('employee_type' in category_filters) {
        employee_type = category_filters['employee_type'];
    }
    if ('years_xp' in category_filters) {
        years_xp = category_filters['years_xp'];
    }

    $(".result-set .result").hide().filter(function() {
        if (employee_type != "") {
            if ($(this).attr('data-employee-type') == employee_type) {
                return true;
            }
        }
        if (years_xp != "") {
            if ($(this).attr('data-xp') == years_xp) {
                return true;
            }
        }
    }).show();

});

Any ideas on what i'm doing wrong? I've been stuck on this for almost 6 hours now and have looked at other examples but they just don't seem to work with my case.

Answer 1

Ok, so you want both filters to apply at the same time, not just show an item as soon as a single filter matches. In your filter function you are returning true as soon as you find a match, so that is where the problem lies.

I went ahead and updated your code a bit:

$('.category').on('change', function() {
  var category_filters = [];

  $('.search-filters select').each(function() {
    if ($(this).val() != 0) {
      category_filters[$(this).attr('id')] = $(this).val();
    }
  });

  $(".result-set .result").hide().filter(function() { 
    var show = true;
    for (var category in category_filters) {
       show = show && $(this).data(category) == category_filters[category];
    }

    return show;
  }).show();

});

And a demo: https://jsfiddle.net/04v4bqw5/1/

As you will notice I did some refactoring as well. This code assumes that the id of the filter matches exactly with the name of the data attribute you want to apply the filter to, so make sure to check the updated HTML as well.

The javascript has a lot less repetition, and you can add as much additional filters and matching data attributes as you want, and they will work without having to change the javascript.

As for the filter function, let me add some comments to explain

// assume we'll want to show the item
var show = true;
// go over each active filter
for (var category in category_filters) {
   // check if the filter value matches the data attribute value, and any
   // previous filters did not exclude this item yet (show &&)
   show = show && $(this).data(category) == category_filters[category];
}

return show;

Answer 2

The reason you're getting this result is because of the behaviour of return true; . Think of this as a break statement - as soon as this is reached in the .filter function, it thinks its work there is done and it can stop processing. To overcome this, use some local booleans and then evaluate them both at the end of the function to decide whether to return true or not:

var etMatch = false, xpMatch = false;

if (employee_type != "") {
    if ($(this).attr('data-employee-type') == employee_type) {
        etMatch = true;
    }
}

if (years_xp != "") {
    if ($(this).attr('data-xp') == years_xp) {
        xpMatch = true;
    }
}

if (etMatch && xpMatch) { return true; }

Answer 3

You should use for each filter its function for comparison:

var compare = {
  "employee-type": function(a,b) { return a===b},
  "years-xp": function(a,b) { return (1*a)<=(1*b) }
}

$(".result-set .result").show().filter(function() {

  var self = this;

  return 
    !Object
     .keys(category_filters)
     .reduce( function(result, i) {

       var filterValue = category_filters[i];
       var itemValue = $(self).attr('data-'+i);

       return result && compare[ i ]( filterValue, itemValue)

     }, true)

}).hide();

[ https://jsfiddle.net/qqc9w4xm/ ]