jQuery Mobile自定义过滤器-复选框 [英] JQuery Mobile Custom Filter - Checkboxes

问题描述

我正在尝试过滤复选框项目列表，我希望所有选中的项目都包括在列表中，无论它们是否满足搜索条件.我的想法是使用自定义搜索，并在所有选中项的data-filtertext属性的前面添加〜"，然后在我的搜索函数中，如果存在〜"或满足常规条件，则返回true .首先，下面的代码除了无法正常工作外，还有很多其他问题，请注意！在检查测试中-状态在检查时尚未更新，如果有人可以帮助我正确设置jquery，我将非常乐意.第二，如何正确设置data-filtertext?第三，是否有任何想法起作用?

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;
         }     
      });

推荐答案

您无需更改过滤器文本属性.而是使用可过滤小部件的 filterCallback 事件来查看如果该项目已选中或包含文本.

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.

因此，给出以下列表:

<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>

附加回调事件.如果选中此复选框，则返回false(不要过滤掉)，否则检查文本和data-filtertext两者是否符合过滤条件:

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

这篇关于jQuery Mobile自定义过滤器-复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！