Searchable List con JQuery

In uno dei miei lavori ho avuto la necessità di creare un componente jquery per ordinare e filtarere gli elementi di una lista html. Nelle mie ricerche mi sono imbattuto in questo blog, ma la soluzione proposta aveva diversi bug e limitazioni.

Ispirato, ho scritto una mia versione con le seguenti caratteristiche:

  • Possibilità di avere più liste nella stessa pagina
  • Possibilità di cambiare l’aspetto della lista e il posizionamento del box di ricerca.

Se siete curiosi di vedere il suo funzionamento potete dare un’occhiata alla demo che ho realizzato.

Il codice html necessario per la nostra lista deve essere il seguente:

<div class="kbyte-sl">
<h1>Seek and destroy:</h1>
<div class="kbyte-slsearchbox">Find:</div>
<ul>
	<li>Golf</li>
	<li>Alpha</li>
	<li>India</li>
	<li>Bravo</li>
	<li>Echo</li>
	<li>Foxtrot</li>
	<li>Charlie</li>
	<li>Delta</li>
	<li>Hotel</li>
</ul>
</div>

Potete arricchire il div come meglio credete – ad esempio il titolo è opzionale – basta che da qualche parte sia presente il div per il box di ricerca e la lista da decorare.

Utilizzare il plugin è banale:

$(document).ready(function()
{
  $(".kbyte-sl").KSearchableList();

  // You can also order the list (optional)
  $(".kbyte-sl ul").each(function() {
    $(this).children().sort(sortAlpha1).appendTo(this);
  });
});

Ovviamente il plugin è migliorabile e modificabile secondo i vostri desideri.

Download

JQuery plugin: kbyte-searchablelist-1.0.js.gz
Example: kslexample.tar.gz

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.