JQuery Mobile 自定义过滤器 - 复选框

Question

我正在尝试过滤复选框项目列表，我希望任何选中的项目都包含在列表中，无论它们是否满足搜索条件。我的想法是使用自定义搜索并在任何已检查项目的 data-filtertext 属性前面添加一个“~”，然后在我的搜索函数中返回 true 如果“~”存在或满足常规条件.首先，下面的代码除了无法正常工作之外还有很大的问题，请注意！在检查的测试中-状态在检查时尚未更新，如果有人可以帮助我正确设置 jquery，我会很高兴。二、如何正确设置data-filtertext？第三，考虑这些是否可行？

$('#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;
         }     
      });

Answer 1

您不需要更改过滤器文本属性。而是使用可过滤小部件的 filterCallback 事件来查看项目是否被选中或包含文本。

所以给出这个列表：

<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（不过滤掉），否则同时检查 text 和 data-filtertext 以查看该项目是否符合过滤条件：

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