jQuery Mobile Listview filter

Supponiamo di avere una jQuery Mobile Listview con parecchi elementi.

Come fare per poter ricercare all'interno soltanto determinati elementi?

Molto semplicemente aggiungendo gli attributi giusti!

Prima di tutto date un'occhiata agli esempi basici che potete trovare qua.

Se vedete più sotto c'è anche l'esempio per il filter.

In sostanza si tratta di usare l'attributo data-filter="true".

Questo aggiungerà una input per la ricerca.

Se volete potete aggiungere altri attributi accessori, ad esempio per il placeholder dentro all'input.

Ecco un esempio preso da una web app mobile che ho fatto:

                <ul data-role="listview" data-filter="true" data-filter-placeholder="Search...">
                    <?php foreach ($array as $var): ?>
                        <li>
                                <span>Allenamento:</span> <?php echo $var['ra_nome']; ?><br>
                                <span>Tempo:</span> <?php echo $var['rt_tempo']; ?><br>
                                <span>Distanza:</span> <?php echo $var['rt_distanza']; ?><br>
                                <span>Media:</span> <?php echo $var['rt_media']; ?><br>
                                <span>Velocità:</span> <?php echo $var['rt_velocita']; ?><br>
                                <span>Data:</span> <?php echo $var['rt_data']; ?><br>
                                <?php if (!empty($var['rt_note'])): ?>
                                    <span>Note:</span> <?php echo $var['rt_note']; ?><br>
                                <?php endif; ?>
                            </a>
                        </li>
                    <?php endforeach; ?>
                </ul>

Nel momento che cercate, vedrete sparire tutti gli elementi che non rientrano nel filtro che state digitando.

Molto easy come al solito!

Ciao!