jQuery Mobile筛选器列表，包括搜索分隔线

Question

我正在开发一个列表，其中包含jQuery Mobile中各项之间的一些分隔符。我还使用属性data-filter =“true”放置了一个搜索框。但是，该过滤器仅适用于列表项目，而不适用于分隔线，并且希望有可能通过分隔线内容进行过滤。

我在JQM论坛看到了我想要的this post的确切行为，我不能重复（我想是因为jQuery版本）。

任何人都可以帮助我吗？

在此先感谢！

Answer 1

我认为您的问题可以通过jQuery Mobile文件中的一些更改来解决。

查找有关筛选（围绕第七千三百二十○线）的代码，找到为声明和删除代码的以下部分：

if (item.is("li:jqmData(role=list-divider)")) { 

    item.toggleClass("ui-filter-hidequeue" , !childItems); 

    // New bucket! 

    childItems = false; 

} else 

这工作既jQuery Mobile 1.1.1和jQuery Mobile 1.2.0 Alpha。

我建议你使用未压缩版本来改变这一点。

Answer 2

如果你的意思是说，你要筛选基础上，分频器的内容除了个别列表项内容分频器的“孩子”，你要使用的数据filtertext选项每个listitem。将分隔符文本和列表项文本放在一起放在字符串中。

<ul data-role='listview' data-filter='true'> 
    <li data-role="list-divider">Tallahassee</li> 
    <li data-filtertext="Tallahassee Dog Et Al">Dog Et Al</li> 
    <li data-filtertext="Tallahassee Jim and Milts">Jim and Milts</li> 
    <li data-role="list-divider">Atlanta</li> 
    <li data-filtertext="Atlanta The Varsity">The Varsity</li> 
</ul> 

Answer 3

我有同样的问题，我通过使用数据filtertext属性强制列表项过滤时，以配合其包装中列表分隔文本与JQM 1.4.2解决。

<form class="ui-filterable"> 
    <input id="filterBasic-input" data-type="search"> 
</form> 

<ul data-role="listview" data-theme="c" data-input="#filterBasic-input" data-filter-theme="a" data-filter="true" data-filter-placeholder="Filtrer..." data-inset="true"> 
    <li data-role="list-divider" > 
     Countries 
    </li> 

    <li data-filtertext="Countries"> 
     France 
    </li> 

    <li data-filtertext="Countries"> 
     England 
    </li> 

    <li data-filtertext="Countries"> 
     Cameroon 
    </li> 

    <li data-role="list-divider" > 
     Fruits 
    </li> 

    <li data-filtertext="Fruits"> 
     Orange 
    </li> 

    <li data-filtertext="Fruits"> 
     Mango 
    </li> 

    <li data-filtertext="Fruits"> 
     Pineapple 
    </li> 

</ul> 

希望它有帮助！