Question

在jQueryMobile中，我编写了一个data-role="listview"组件，我想过滤包括其分隔符在内的数据。也就是说，当用户输入一些要搜索的文本时，它可以对应于特定项目或分隔符。在最后一种情况下，必须显示整个分隔符及其子项。问题是默认的过滤机制省略了分隔符，我不知道如何正确地重新定义filterCallback函数。

有谁知道如何实现这个目标？

我尝试的代码是here。

提前致谢。

Answer 1

为了包含匹配分隔符文本的结果，我在每行中放入一个包含分隔符文本的隐藏页面。

<li>
    <a>
        <p>Item</p>
        <p style='display:none;'><?php echo $my_divider; ?></p>
    </a>
</li>

Answer 2

我有一些东西：

http://jsfiddle.net/DCkDp/24/

JS

$("#myList").listview('option', 'filterCallback', function (text, searchValue) { 
    $("li[data-groupoptions]").removeClass('override-ui-screen-hidden');
    $("li[data-groupoptions="+searchValue.toLowerCase()+"]").addClass('override-ui-screen-hidden');
    return text.toLowerCase().indexOf( searchValue ) === -1;
});

CSS

.override-ui-screen-hidden {
    display:block !important;   
}

HTML

<div data-role="page">
    <div data-role="content">
        <ul id="myList" data-role="listview" data-filter="true">
            <li data-role="list-divider" data-groupoptions="aaaa">AAAA</li>
            <li data-groupoptions="aaaa"><a href="index.html">Adam Kinkaid</a></li>
            <li data-groupoptions="aaaa"><a href="index.html">Alex Wickerham</a></li>
            <li data-groupoptions="aaaa"><a href="index.html">Avery Johnson</a></li>
            <li data-role="list-divider" data-groupoptions="bbbb">BBBB</li>
            <li data-groupoptions="bbbb"><a href="index.html">Bob Cabot</a></li>
            <li data-role="list-divider" data-groupoptions="cccc">CCCC</li>
            <li data-groupoptions="cccc"><a href="index.html">Caleb Booth</a></li>
            <li data-groupoptions="cccc"><a href="index.html">Christopher Adams</a></li>
            <li data-groupoptions="cccc"><a href="index.html">Culver James</a></li>
        </ul>
    </div>
</div>

Answer 3

对Phill Pafford的回答与匹配不完整的分隔符名称相比有所改善：改变这个：

$("li[data-groupoptions="+searchValue.toLowerCase()+"]").addClass('override-ui-screen-hidden');

用这个：

$("li[data-groupoptions*="+searchValue.toLowerCase()+"]").addClass('override-ui-screen-hidden');

现在你只需输入'AA'即可匹配'AAAA'。在这里试试：http://jsfiddle.net/qjJw3/

按项目和分隔符过滤Listview

3 个答案: