Question

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

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

任何人都可以帮我吗？

提前致谢！

Answer 1

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

查找有关过滤器的代码（围绕第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。

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

Answer 2

如果您想要根据分隔符的内容对单个 listitem 内容过滤分隔符的“子项”，则您需要在每个 listitem 上使用 data-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

我遇到了同样的问题，我通过使用data-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>

希望它有所帮助！

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

3 个答案: