Da purista vecchia scuola mi costa molto fare questo post, ma non sempre riscoprire l'acqua calda paga.
Il tema del giorno infatti riguarda le
selectbox html troppo lunghe, quelle chilometriche per intenderci.
Quando infatti ci troviamo davanti ad una
select con troppe voci, oltre a risultare difficoltoso scorrere tutti i nominativi, può risultare anche ostico trovare una voce con il vecchio trucco di digitarne le iniziali.
Vediamo quindi come il web di oggi ci consente di
fare una ricercare in una select con il
javascript, i fogli di stile e l'html.
Come creare una select box con ricerca in html/javascript
Per fare ciò che vi sto per andare a spiegare, un tempo avrei rimboccato le maniche e me la sarei giocata tranquillamente con il sacro
js, il semplice
html ed i
fogli di stile.
Oggi però tutto ciò non serve più, dato che la pappa pronta arriva da una libreria
javascript che si chiama
select2.
Per poter usare questa libreria si può sia scaricarla in locale e richiamarla, o anche includere direttamente il codice da uno dei siti di servizio di google.
Ecco un esempio di funzionamento del secondo caso, senza dunque dover installare niente sulla propria macchina/sito web in locale:
<!DOCTYPE HTML>
<html>
<head>
<title>Select2 test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<select class="js-example-basic-single" name="nomi">
<option value="AN">Antonio</option>
<option value="FR">Franco</option>
<option value="CA">Roberto</option>
</select>
<script type="text/javascript">
$(document).ready(function()
{
$('.js-example-basic-single').select2(
{
placeholder: "Select a state", allowClear: true
});
});
</script>
</body>
</html>
Il risultato sarà una cosa del genere:
Avremo così creato una
select html con ricerca, ovvero una
selectbox con un apposito box di ricerca con cui filtrare le varie option presenti in elenco.
Andando ad analizzare il codice usato, ecco cosa occorre includere per primo:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
La prima inclusione riguarda il potentissimo
jquery, senza il quale non si può usare la libreria
select2 (cosa non propriamente esplicitata nel tutorial del sito di riferimento, e che mi ha fatto perdere un sacco di tempo per capire come mai la mia
select non aveva il box di ricerca come nell'esempio online :p).
Poi bisogna creare la
select semplicemente definendo una classe riconosciuta da questa libreria, che nel caso delle select singole è la
js-example-basic-single.
Infine si usa la funzione
ready, che agisce al caricamento completo della pagina, per inizializzare tutte le
select in cui viene rilevata la classe indicata.
Il codice usato in questo caso è il seguente:
$(document).ready(function()
{
$('.js-example-basic-single').select2(
{
placeholder: "Select a state", allowClear: true
});
});
Dove ad esempio si può aggiungere l'attributo
placeholder e specificare se si vuole consentire il tasto per svuotare la select (
allowClear).
Ovviamente ci sono diversi altri attributi inseribili/inizializzabili, ma non sono argomento di questa guida (cit.).
Se si vuole inizializzare la
select2 con valori di default già selezionati, basta usare il classico attributo
selected (es:
<option value="AN" selected>Antonio</option>).
Riporto qui sotto un altro esempio, con il quale è possibile creare
select multiple con ricerca:
<select class="js-example-basic-multiple" name="nominativi[]" multiple="multiple">
<option value="AN">Antonio</option>
<option value="FR">Franco</option>
<option value="CA">Roberto</option>
</select>
<script type="text/javascript">
$(document).ready(function()
{
$('.js-example-basic-multiple').select2(
{
placeholder: "Select a state", allowClear: true
});
});
</script>
Quello che cambia sostanzialmente da una select singola, è il nome della classe (
js-example-basic-multiple) e l'attributo
multiple.
Tra l'altro la potentissima
select2 consente di includere più select con ricerca in una sola pagina web, senza dover inizializzare ogni singolo oggetto nella
ready.
Se ad esempio abbiamo 10
select di tipo singolo e 3
multiselect con ricerca, la parte del js potrebbe essere banalmente:
$(document).ready(function()
{
$('.js-example-basic-single').select2(
{
placeholder: "Select a state", allowClear: true
});
$('.js-example-basic-multiple').select2(
{
placeholder: "Select a state", allowClear: true
});
});
La libreria javascript
select2 è molto potente e completa, infatti è anche possibile gestire
select di tag, dove è anche possibile aggiungere le
option tags mancanti dopo averle scritte nel box di ricerca.
Ecco un codice d'esempio:
<select class="js-example-tags" name="nominativi[]" multiple="multiple">
<option value="AN">Antonio</option>
<option value="FR" selected="selected">Franco</option>
<option value="CA">Roberto</option>
</select>
$(".js-example-tags").select2({
tags: true
});
In questo caso quindi, quando si cerca una opzione che non esiste, cliccandoci sopra questa viene aggiunta alla
select come nuova
option, generando di fatto una
select dinamica html.
Infine occorre precisare che è ovviamente possibile personalizzare la grafica delle select generate, usando i css.
La classe principale di riferimento è la
.select2.
Avendo infatti scoperto che questa libreria stranamente di default non è
responsive, sono andato a metterci una pezza modificando la classe css principale, con qualcosa del genere:
.select2 {max-width:100%;}
Bene, è tutto.
Le potenzialità della potentissima
select2 sono davvero molte, ma la sua vera forza è sicuramente la semplicità e la rapidità d'utilizzo.
Per maggiori info ed eventuali download vi rimando al
sito ufficiale.
