Come creare un datalist che è immediatamente ricercabile

Elenchi a discesa sono un modo pulito per fornendo opzioni per un campo di input, in particolare quando l'elenco delle opzioni disponibili è lungo. Un utente può scegliere l'opzione desiderata digitando nel campo, o guarda attraverso le opzioni quello può essere una corrispondenza per quello che stanno cercando. Essere in grado di cercare tra le opzioni, tuttavia, è la soluzione ideale.

Questo comportamento può essere raggiunto con Elemento HTML che visualizza suggerimenti di input per diversi controlli, come ad esempio etichetta. però mostra solo le opzioni disponibili quando l'utente ha ho già battuto qualcosa nel campo di input.

Possiamo rendere più utilizzabile un campo di input se abilitiamo gli utenti accedi alla lista completa delle opzioni in qualsiasi momento durante il processo di acquisizione dei dati.

In questo post vedremo come creare un elenco a discesa che è ricercabile in qualsiasi momento usando il etichetta equivale a il id del tag: è così che li leghiamo gli uni agli altri.

2. Rendere visibile il datalista

Di default, il L'elemento HTML è nascosto. Possiamo vederlo solo quando noi inizia a digitare un input nel campo a cui è associato il datalist.

Tuttavia c'è un modo per "forzare" il contenuto del datalist (cioè tutte le sue opzioni) apparire sulla pagina web. Abbiamo solo bisogno di dargli un adatto display costo dell'immobile diverso da nessuna, per esempio blocco di visualizzazione;.

 datalist display: block;

Le opzioni visualizzate non sono ancora selezionabili a questo punto, solo il browser rende le opzioni trova all'interno del datalist.

Come già detto, a causa del comportamento integrato del elemento, una parte delle opzioni appare già e può essere selezionata, ma solo quando l'utente inizia a digitare una stringa a cui il browser può trova un'opzione corrispondente.

Dobbiamo anche trovare un meccanismo da fare tutti opzioni (nella schermata sopra visualizzata sotto il datalist a discesa) selezionabile a qualsiasi altro punto del processo di presa di input - quando gli utenti vogliono verificare le opzioni prima di digitare qualcosa o mentre hanno già inserito qualcosa nel campo di input.

3. Entra nel Elemento HTML.

Scegliamo il secondo metodo, in quanto è più semplice, e può essere utilizzato come meccanismo di riserva nei browser che non supportano il elemento. Quando un browser non può visualizzare e visualizzare il datalist, esso rende il Tag HTML, il codice ha un aspetto simile al seguente:

Datalist combinato con Aggiungere il multiplo attributo al tag, in modo che quando l'utente seleziona un'opzione dall'elenco a discesa, il suo valore verrà visualizzato all'interno di campo pure. / * quando l'utente seleziona un'opzione da DDL, scriverla nel campo di testo * / select.addEventListener ('change', fill_input); function fill_input () input.value = options [this.selectedIndex] .value; hide_select (); svantaggi Lo svantaggio principale di questa tecnica è il assenza di un modo diretto per lo stile elemento con CSS (l'aspetto del e