Filter Listview by items and dividers

Question

In jQueryMobile, I have written a data-role="listview" component and I want to filter the data including its dividers. That is, when the user inputs some text to search, it may correspond to specific items or to dividers. In this last case, the whole divider and its subitems must be shown. The problem is that the default filtering mechanism ommits the dividers and I don't know how to properly redefine the filterCallback function.

Does anyone know how to achieve this?

The code which I was trying is here.

Thanks in advance.

Answer 1

Well I have something:

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

JS

$("#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>

Answer 2

For including results matching dividers text, I put in each lines a hidden p wich contains the divider's text.

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

Answer 3

Little improvement over Phill Pafford answer to match incomplete dividers names: change this:

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

with this:

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

Now you can match 'AAAA' just typing 'AA'. Try it here: http://jsfiddle.net/qjJw3/