jQuery Mobile filter list including search on dividers

I'm developing a list with some di开发者_高级运维viders between the items in jQuery Mobile. I've also place a search box using the property data-filter="true". However, the filter only applies to the list items, and not on the dividers, and want to have the possibility to filter by the divider content.

I have seen the exact behavior I want in this post at the JQM forum, which I can't repeat (I suppose due to jQuery version).

Can anyone help me with this?

Thanks in advance!

I think your problem can be resolved with a couple of change in the jQuery Mobile file.

Look for the code about the Filter (around the 7320th line), find the for statement and remove the following part of the code:

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

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

    // New bucket!

    childItems = false;

} else

This works with both jQuery Mobile 1.1.1 and jQuery Mobile 1.2.0 Alpha.

I suggest you to work with the uncompressed version for changing this.

If you meant to say that you want to filter the divider's "children" based on the divider's content in addition to the individual listitem content, you'll want to use the data-filtertext option on each listitem. Put both the divider text and the listitem's text together in the string.

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

i had the same problem, that i solved with JQM 1.4.2 by using the data-filtertext attribute to force list items to match with their wrapping list-divider text when filtering.

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

Hope it helps!