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>