Ordinare e filtrare le liste in Javascript...

... in soli 7Kb

Recentemente cercando un modo di ordinare delle liste in Javascript, mi sono imbattuto in list.js, un plugin JQuery molto piccolo (solo 7Kb minimizzato) che rende le liste HTML ordinabili, filtrabili e su cui permette anche di fare ricerche! Fantastico! Ma come si usa?!

Si parte ovviamente da una normale lista HTML contenuta con un numero imprecisato di elementi:

                            

    
Edoardo
    
Milano
                            
...

All'interno degli elementi della lista ho inserito due ulteriori elementi a cui ho assegnato una classe. List.js permette di filtrare gli elementi della lista utilizzando proprio quelle classi!

Il prossimo passo da fare è far indicizzare il markup della lista, in questo modo:

Arrivati a questo punto list.js ha creato una struttura su cui è possibile effettuare operazioni di filtraggio, ricerca e ordinamento. Vediamo come.

Per filtrare la lista non bisogna fare altro che creare degli elementi nel DOM che abbiano come classe "sort" e utilizzare la classe su cui si vuole filtrare come attributo "rel". Ad esempio per filtrare per nome è sufficiente scrivere:

Ordina per nome

e al resto penserà list.js!

Effettuare ricerche nella lista è ancora più facile: basta inserire all'interno della div "container" una input di testo che abbia come classe "search":

Il filtraggio invece è leggermente più complicato perchè va scritto del codice per ogni tipologia di filtro. Ad esempio il markup per filtrare gli elementi della lista per una città è:

Solo di Milano

e il codice javascript che controlla quell'elemento è:

featureList.filter(function(values) {

if (values.city.toLowerCase() == 'milano') {
    return true;
  }

return false;
});

Niente male vero? In pochissime righe di Javascript abbiamo ottenuto una lista ordinabile e filtrabile partendo da una normale lista HTML!