Guida su come convertire una lista Ul HTML in un Select con ricerca degli elementi

Questo piccolo software usa JavaScript per convertire una lista di link Ul in un Select. Questo software risulta molto utile per dispositivi mobili, in quanto le liste lunghe sono di difficile consultazione su piccoli schermi. L'aggiunta di una ricerca interna al select rende molto più facile l'individuazione degli elementi del select.

Come funziona il codice?

Si parte da un Ul con un determinato id. L'ul deve avere la forma: 

<ul id="...">
	<li><a href="...">...</a></li>
	<li><a href="...">...</a></li>
	<li><a class="active" href="...">...</a></li>
	...
</ul>

Se una delle Li ha una classe active, quel li trasformato in option sarà selezionato. Nell'esempio qui sotto la Francia pur non essendo la prima delle option compare come selezionata.

Si include il JavaScript, il CSS e si richiama la funzione con i parametri richiesti. 

$(window).on("load resize", function() {
	ulToSelect($("ul#id"), 767);
});

Dove ul#id si riferisce all'ul con un determinato id e 767 è il valore minimo per il quale la lista viene convertita in select. Questi due parametri possono essere modificati in base alle vostre esigenze.

Qui sotto trovate un esempio dell'utilizzo di questa soluzione:

In questo esempio il valore da 767 è stato portato a 1920 cosi da essere visto in azione anche su schermi grandi. Questa implementazione supporta la navigazione nel search con i tasti di direzione su e giù. Si può selezionare un elemento con il bottone enter. Si può notare la modifica del url con un hash se si seleziona uno qualsiasi dei elementi della lista. Il primo ul ha sull'li corrispondente alla Francia la classe active che fa si che quel li trasformato in option sia selezionato.

EUROPE States

USA States

Dove scaricare il codice ul to select?

Vi rimando a questa pagina GitHub per il codice che potrete liberamente scaricare.