Question

我正在尝试过滤复选框项目列表，我希望任何选中的项目都包含在列表中，无论它们是否满足搜索条件。我的想法是使用自定义搜索并在任何已检查项的data-filtertext属性的前面添加'〜'，然后在我的搜索函数中，如果'〜'存在或者满足常规条件则返回true 。首先，下面的代码除了没有工作之外还有很多问题，请注意！在检查的测试 - 状态在被检查时没有更新，如果有人可以帮助我使jquery正确，我会喜欢它。其次，如何正确设置数据文件？第三，关于这是否有效的想法？

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

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

1 个答案: