multifilter functionality added

[dagjomar]

I wanted to add multiple filters to the list, so this is how I added that functionality...

[mjoraid]

Would you please elaborate on what do u mean by multifilter? and how to implement that.
Let's say I have a list of Item | Price | Date

1- filter items purchased today, then i want to sort them their price (this works fine).
2- filter items purchased today, then, filter items that has a price in range between (10-200). All items that have that range appear even thought some have not been purchased today.

So, how can I keep adding filters instead of apply a new one every time?

n.b after looking at the code, it seems filter works on this.items, while i want it to work on this.matchingITems.

Thanks.

[shohagbhuiyan]

I am really struggling with multiFiltering. Do you have any simple example page? please?

[mjoraid]

@shohagbhuiyan: it's quite easy once you figure it out.
The addition added by @dagjomar is simple and smart. The list.js can only apply one filter at a time by passing the filter function to listObj.filter(function(){//you function}). What @dagjomar did in addition to passing a filter function, pass an array full of filter function of your own.

In other words, create your own array and whenever you want to apply a filter added the filter function to the array and then pass the whole array to list.js filter function, it will detect whether u r passing a a single function or an array, if array is being passed, then it will loop thru it and apply each function.

Basically that what i did.

One more thing, if you want to remove a certain filter, delete it from the array then pass the array again so it will apply other filters.

Hope it's clear enough.

[shohagbhuiyan]

Hi @mjoraid, thanks for the reply. But do you have any example or demo link? It will help me a lot. Thanks.

[dagjomar]

Well, I think I used it somewhat like this:

filterFunc1 = function(item){ return item.someValue > 3 && item.someValue < 6 };
filterFunc2 = function(item){ return item.someOtherValue === 'car' };
filterFunc3 = function(item){ return item.someThing === 'white' || item.someThing === 'red' };

var filters = [filterFunc1, filterFunc2, filterFunc3];

LIST.filter(filters); //Finally filter the LIST with the array of multiple filters

[dagjomar]

The purpose for my use case, was that I had a left column in my UI, where I would enable/disable different kind of filters. So I dynamically populated an array of filter-functions based on which ones were enabled, and the state of those custom filters. This array gets passed to filter, and voila!

[waynehoover]

👍 to merging this.

[ts]

Any chance this will get merged, perhaps into v1.2.0? I'm happy to help if that's all we're waiting for, @javve.

[mjoraid]

Just to help new comers, this what i did. Im sure someone can do better.

From my class object, I made a few functions to use list.js library. Code samples like:

//this function will get the value from html dom when the user choose to filter a range 
LobbyClass.prototype.filterInt = function(dom_class, min, max)
{
    min = parseInt(min);
    max = parseInt(max);
  //this filter function will be store in array to be passed to list.js later on
    var filterFunction = function(item) {
        var intVal = parseInt(item.values()[dom_class]);
        if (intVal >= min && intVal <= max) {
            return true;
        } else {
            return false;
        }
    };

    this.addFilterAndApply(dom_class, filterFunction);//build up filters so we can have multiple filters     
};

LobbyClass.prototype.addFilterAndApply = function(type, filter)
{  //override previous function from same type, one filter for each type. 
    if (type && filter)
    {
        this.filters[type] = filter;
    }
    var allFilters = this.getFilters();
    if (allFilters.length > 0)
    {
        this.filterComp.filter(allFilters);//pass all filters to be applied.      
        this.checkTableRows();// to dsiplay message if no data found.
    }
};

LobbyClass.prototype.getFilters = function(name)
{
    if (name)
    {
        return this.filters[name];
    }
    else
    {
        //convert object to array
        var filters_arr = [];
        $.each(this.filters, function(index, data) {
            filters_arr.push(data);
        });
        return     filters_arr;
    }

};

[cbier]

+1! I manually merged this in and didn't see any conflicts. Not sure what that notification from GitHub (below) means. Please merge this in @javve :)

[sandersu]

@cbier how and where did you merge this?

[BjoernHH]

The Code-Change in the first Posting has a small bug:
I use 2 filters

<div id="users">
  <input class="search" placeholder="name" />
  <input class="search" placeholder="born" />


  <div class="list">
    <div>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </div>
    <div>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
    </div>
    <div>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1985</p>
    </div>
    <div>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>

    </div>
  </div>
</div>
<script src="js/list.js"></script>
<script>
var options = {
  valueNames: [ 'name', 'born' ]
};
var userList = new List('users', options);
</script>

If i write jo in the first field, filtering is ok (Jonny Stromberg, Jonas Arnklint).
If i than write 7 in the second field, filtering also ok (none)
But if i than delete the 7 from the second field, jo is still in the first field, filterig result is the full list, not Jonny Stromberg and Jonas Arnklint

[cbier]

@sandersu I manually added the changes to my local list.js

[lmartins]

Any chance this could be merged in the near future or should I look for alternatives?