CODEWITHSUNDEEP
jqueryjquery-mobile
user1455270
user1455270

Reputation: 113

JQuery Mobile Custom Filter - Checkboxes

I'm trying to filter a list of check box items, I want any checked items to be included in the list regardless if they satisfy the search criteria. My idea was to use a custom search and to add a '~' to the front of the data-filtertext attribute of any checked items, then in my search function return true if the '~' is there or if the regular criteria is met. First the code below has huge problems in addition to it not working, note the ! on the test for checked - the status hasn't updated at the point it's being checked, I'd love it if someone could help me make the jquery right. Second, how do I set the data-filtertext properly? Third, thoughts on if any of this is going to work? 

$('#my_id').find('.ui-btn').on('click', function(){  
         var id = this.htmlFor;  
         var checked = ! $('#' + id).is(':checked');
         if (checked)
         {
           var filter_text = '~' + this.innerHTML;
           this.attributes['data-filtertext'] = filter_text;
         }
         else
         {
           this.attributes['data-filtertext'] = this.innerHTML;
         }     
      });

Upvotes: 0

Views: 424

Answers (1)

ezanker
ezanker

Reputation: 24738

You don't need to alter the filter text attribute. Instead use the filterCallback event of the filterable widget to see if the item is checked or contains the text.

So given this list:

<form>    
    <input data-type="search" id="filterControlgroup-input">
</form>
<div id="myList" data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
    <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" data-filtertext="seven">
    <label for="checkbox-v-2a" >One</label>
    <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
    <label for="checkbox-v-2b">Two</label>
    <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
    <label for="checkbox-v-2c">Three</label>
</div>

Attach the callback event. If the checkbox is checked, return false (don't filter out) otherwise check both the text and data-filtertext to see if the item meets the filter criteria:

$(document).on("pagecreate", "#page1", function () {
    $("#myList").filterable('option', 'filterCallback', checkedOrMatch);
});

function checkedOrMatch(idx, searchValue) {
    var ret = false;
    var $chkbox = $(this).find('input[type="checkbox"]')
    var IsChecked = $chkbox.is(':checked');
    if (IsChecked) {
        //always show checked items in list regardless of filter criteria
        ret = false;
    } else if (searchValue && searchValue.length > 0) {
        searchValue = searchValue.toLowerCase();
        var text = $(this).text().toLowerCase();
        var filttext = $chkbox.data("filtertext") || '';
        filttext = filttext.toLowerCase();
        //if neither text nor filtertext contain searchvalue, return true to filter out
        if (text.indexOf(searchValue) < 0 && filttext.indexOf(searchValue) < 0) {
                ret = true; //filter this one out
        }        
    }    
    return ret;
}

DEMO

Upvotes: 1

Related Questions