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.
Lascia un commento!