JQuery Mobile filterable listview with multiple filters

Question

I have a JQM 1.4.2 filterable listview which contain entries in different languages.

I would like to search only within items code, not the whole description, whereby i set the data-filtertext for list items to the item code, e.g. "Apple" or "Banana". This works ok but now i need an additional language filter, e.g. "EN", "DE", and so on:

...
<li data-filtertext="Apple language_en">
    <h2>Title</h2>
    <p>Red fruit</p>
    <p class="ui-li-aside"><strong>EN</strong></p>
</li>
...
...
<li data-filtertext="Banana language_de">
    <h2>Titel</h2>
    <p>Beschreibung</p>
    <p class="ui-li-aside"><strong>DE</strong></p>
</li>
...

This is my data input:

<form class="ui-filterable">
    <div class="ui-grid-a">
        <div class="ui-block-a">
            <input id="descriptions-input" data-type="search" placeholder="Search..." />
        </div>
        <div class="ui-block-b">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <input name="lang-en" id="lang-en" type="checkbox" data-mini="true">
                <label for="lang-en">EN</label>
                <input name="lang-de" id="lang-de" type="checkbox" data-mini="true">
                <label for="lang-de">DE</label>
                <input name="lang-fr" id="lang-fr" type="checkbox" data-mini="true">
                <label for="lang-fr">FR</label>
            </fieldset>
        </div>
    </div>
</form>

What i try to do now, is that when a checkbox is selected, only the list items belonging to that language are visible.

How can i set this additional filter to my filterable jQuery Mobile listview?

Plunker: http://plnkr.co/edit/TV6rcatzdvaIvQzWBdoI?p=preview

EDIT:

This is the final solution, thanks to EZANKER: https://jsfiddle.net/m64kg5fw/4/

ezanker · Accepted Answer · 2016-02-15 15:33:18Z

1

The filterable widget as a filterCallback property: http://api.jquerymobile.com/filterable/#option-filterCallback

You can use this to write a function that checks both the text and which language checkboxes are checked.

$(document).on("pagecreate", "#list-descriptions", function () {   
    $("#descriptions-list").filterable('option', 'filterCallback', checkedOrMatch);

    $("#searchLangs input").on("change", function(){
      $("#descriptions-list").filterable("refresh");
    });
});

function checkedOrMatch(idx, searchValue) {
    var ret = false;
    var en = $("#lang-en").is(':checked');
    var de = $("#lang-de").is(':checked');
    var fr = $("#lang-fr").is(':checked');
    var ignoreLang = false;
    if (!en && !de && !fr) {
        ignoreLang = true;
    }

    if (searchValue && searchValue.length > 0) {
        searchValue = searchValue.toLowerCase();
        var filttext = $(this).data("filtertext") || '';
        filttext = filttext.toLowerCase();
        if (filttext.indexOf(searchValue) < 0) {
            ret = true; //filter this one out
        } else if (!ignoreLang) {       
            //found filter text now check language
          if (  (filttext.indexOf("language_en") > 0 && !en) || (filttext.indexOf("language_de") > 0 && !de) || (filttext.indexOf("language_fr") > 0 && !fr) ) {
            ret = true; //filter this one out
          }            
        }      
    }    
    return ret;
}

Updated DEMO

The checkedOrMatch functions runs for each item in the list. It first tests if the entered search text is found in the filter text. If it is, it then sees which language buttons are checked and tests the item for that language. I also added code to re-trigger the filter if the user selects language buttons after typing the search criteria.

NOTE: if the user types in "lang" you might not get what you want... In that case you could move the language designation out of the filter text and into a separate data-attribute.

answered Feb 15, 2016 at 15:33

ezanker

24.7k1 gold badge22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

deblocker Over a year ago

for the checkbox filter to be applied, the filtertext must have length not zero, could this be changed so that the checkbox filter works also "stand-alone"?

deblocker Over a year ago

i like the hint for a separate "data-language" attribute. works well!

ezanker Over a year ago

@deblocker here is an update that does not require any text in the search: jsfiddle.net/ezanker/m64kg5fw/2

ezanker Over a year ago

@deblocker, and here is an update using a separate attribute for language: jsfiddle.net/ezanker/m64kg5fw/3

deblocker Over a year ago

moreover adding the data-attribute also to the list dividers solves the problem of the list dividers disappearing when filter is active. BTW, jsfiddle.net/m64kg5fw/4

Collectives™ on Stack Overflow

JQuery Mobile filterable listview with multiple filters

1 Answer 1

Updated DEMO

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Updated DEMO

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related