按项目和分隔线筛选列表视图

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

有谁知道如何做到这一点？

我正在尝试的代码是here。

在此先感谢。

来源

2012-01-13 Pablo

你的例子适用于我，按'b'和'aaaa'分隔符被删除 – 2012-01-13 13:11:48

这是因为第二个分隔符包含一个包含字母'b'的元素，但不是因为分隔符文本包含那封信。尝试搜索'bbbb'。我希望在这种情况下分频器会出现。 – Pablo 2012-01-13 13:37:39

我可以问你为什么需要这个吗？分频器是用来组不显示结果恕我直言 – 2012-01-13 14:10:59

嗯，我有话：

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

$("#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-16 18:54:01

非常感谢！我只作了小的变化和代替选择器'$（ “利[数据groupoptions =” + searchValue.toLowerCase（）+ “]”）'我用'$（ “利[数据groupoptions * =” + searchValue。 toLowerCase（）+“]”）'，因此当搜索其名称的一部分时，特定的组也会出现。这里更新：http://jsfiddle.net/DCkDp/25/ – Pablo 2012-01-17 07:16:22

更好的+1为一个不错的开箱问题。起初我并不理解实际应用，但现在我真的很喜欢它 – 2012-01-17 13:48:46

我看到的唯一问题，它不是通用的，所以它不会与KnockoutJS开箱即可玩 – Adaptabi 2012-10-22 10:43:30

对于包括结果匹配分隔文本，我把一个隐藏p至极包含分隔的文本每行。

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

来源

2012-05-18 14:33:00 Tikal

这是一种膨胀 – Adaptabi 2012-10-22 10:42:48

有点起色了菲尔Pafford答案匹配不完全分隔的名字：这个

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

：改变这种

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

现在你可以匹配 'AAAA' 只是键入“ AA”。这里试试吧：http://jsfiddle.net/qjJw3/

来源

2013-03-05 03:42:34

按项目和分隔线筛选列表视图

回答

相关问题