jQuery Mobile 过滤器列表，包括搜索分隔符答案

【问题标题】：jQuery Mobile filter list including search on dividersjQuery Mobile 过滤器列表，包括搜索分隔符
【发布时间】：2011-08-19 12:11:12
【问题描述】：

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

我在 JQM 论坛的 this post 中看到了我想要的确切行为，我无法重复（我想是由于 jQuery 版本）。

谁能帮我解决这个问题？

提前致谢！

【问题讨论】：

标签： jquery list mobile filter

【解决方案1】：

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

查找关于Filter的代码（在第7320行附近），找到for语句并删除以下部分代码：

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。

我建议您使用未压缩版本来更改此设置。

【讨论】：

【解决方案2】：

如果您的意思是说要根据分隔符的内容过滤分隔符的“子项”除了单个 listitem 内容，您需要在每个 listitem 上使用 data-filtertext 选项。将分隔符文本和列表项的文本放在字符串中。

<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>

【讨论】：

【解决方案3】：

我遇到了同样的问题，我使用 JQM 1.4.2 解决了这个问题，方法是使用 data-filtertext 属性强制列表项在过滤时与其包装列表分隔符文本匹配。

<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>

希望对你有帮助！

【讨论】：