Filtro ListView per elementi e divisori

Question

In JQuerymobile, ho scritto a data-role="listview" Componente e io vogliamo filtrare i dati compresi i suoi divisori. Cioè, quando l'utente inserisce un po 'di testo per la ricerca, può corrispondere a elementi specifici o ai divisori. In quest'ultimo caso, devono essere mostrati l'intero divisore e i suoi subitem. Il problema è che il meccanismo di filtraggio predefinito risolve i divisori e non so come ridefinire correttamente il filterCallback funzione.

Qualcuno sa come raggiungere questo obiettivo?

Il codice che stavo provando è qui.

Grazie in anticipo.

Answer 1

Beh ho qualcosa:

• 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

Per includere risultati che corrispondono al testo dei divisori, ho inserito ogni riga un p che contiene il testo del divisore.

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

Answer 3

Piccolo miglioramento rispetto alla risposta di Phill Pafford per abbinare i nomi dei divisori incompleti: cambia questo:

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

con questo:

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

Ora puoi abbinare "AAAA" semplicemente digitando "AA". Provalo qui: http://jsfiddle.net/qjw3/