Multiple Filters in list.js?

Question

I have two columns that I want to be filterable with list.js. I tried the following code:

    var options = {
      valueNames: [ 'formformname', 'form-name', 'form-email','form-phone','form-branch','form-message','formstatus','form-assignment' ],
        page: 15,
        pagination: [{
        outerWindow: 2,
        }]
    };

    var userList = new List('users', options);

    $('#origin').change(function () {
        var selection = this.value;
        if (selection) {
            userList.filter(function(item) {
                return (item.values().formformname == selection);
            });
        } else {
            userList.filter();
        }
    });
    $('#status').change(function () {
        var selection = this.value;
        if (selection) {
            userList.filter(function(item) {
                return (item.values().formstatus == selection);
            });
        } else {
            userList.filter();
        }
    });

And it works fine for each column, the problem is if I select an 'origin' filter, then a 'status' filter, or vice versa, the second selection wipes out the first one. What I want to do is have them function together. Any ideas?

Answer 1

Following creates an array from the selected dropdowns and uses Array#every() to check each item in the list filter.

Note the addition of the data-prop attribute to each <select> in order to determine which column property to filter for each one

var options = {
  valueNames: ['name', 'born']
};

var userList = new List('users', options);

const $sels = $('select.table-filter').change((e)=> {

  const filterArr = $sels.toArray()
                          .filter(el => !!el.value)
                          .map(el =>({prop: el.dataset.prop, value:el.value}))
  
  
  userList.filter(function(item) {    
      return !filterArr.length || filterArr.every(f =>  f.value === item.values()[f.prop]);      
  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Name:
<select class="table-filter" data-prop="name">
  <option value="">Choose name</option>
  <option value="Jonny Stromberg">Jonny Stromberg</option>
  <option value="Jonas Arnklint">Jonas Arnklint</option>
  <option value="Martina Elm">Martina Elm</option>
  <option value="Gustaf Lindqvist">Gustaf Lindqvist</option>
</select>

Year Born:
<select class="table-filter" data-prop="born">
  <option value="">Choose year</option>
  <option value="1983">1983</option>
  <option value="1985">1985</option>
  <option value="1986">1986</option>
</select>
<hr/>
<div id="users">

  <table>
    <!-- IMPORTANT, class="list" have to be at tbody -->
    <tbody class="list">
      <tr>
        <td class="name">Jonny Stromberg</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Jonas Arnklint</td>
        <td class="born">1985</td>
      </tr>
      <tr>
        <td class="name">Martina Elm</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Gustaf Lindqvist</td>
        <td class="born">1983</td>
      </tr>
    </tbody>
  </table>

</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>