2

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

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

我正在尝试的代码在这里。

提前致谢。

4

3 回答 3

3

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

<li>
    <a>
        <p>Item</p>
        <p style='display:none;'><?php echo $my_divider; ?></p>
    </a>
</li>
于 2012-05-18T14:33:00.927 回答
2

好吧，我有一些东西：

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>
于 2012-01-16T18:54:01.533 回答
0

对匹配不完整分隔符名称的 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/

于 2013-03-05T03:42:34.690 回答