Paradiso Per Designer E Sviluppatori

Come creare un datalist che è immediatamente ricercabile

Gli elenchi a discesa sono un ottimo modo per fornire opzioni per un campo di input, in particolare quando l'elenco delle opzioni disponibili è lungo. Un utente può scegliere l'opzione che desidera digitando nel campo o esaminare le opzioni che potrebbero corrispondere a ciò 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 già inserito qualcosa nel campo di input.

Possiamo rendere più utilizzabile un campo di input se consentiamo agli utenti di accedere all'intero elenco di opzioni in qualsiasi momento durante il processo di acquisizione degli input.

In questo post vedremo come creare un elenco a discesa che sia ricercabile in qualsiasi momento usando il il tag è lo stesso id del tag: è così che li leghiamo l'un l'altro.

2. Rendi visibile il datalist

Di default, il L'elemento HTML è nascosto . Possiamo vederlo solo quando iniziamo a digitare un input nel campo al quale è collegato il datalist.

Tuttavia esiste un modo per "forzare" il contenuto del datalist (cioè tutte le sue opzioni) a comparire sulla pagina web . Abbiamo solo bisogno di dargli un valore di proprietà display adeguato diverso da none, ad esempio display:block; .

 datalist {display: block; }

Le opzioni visualizzate non sono ancora selezionabili a questo punto, il browser esegue solo il rendering delle opzioni che 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ò trovare un'opzione corrispondente .

Abbiamo anche bisogno di trovare un meccanismo per rendere selezionabili tutte le opzioni (nella schermata sopra mostrata sotto il datalist a discesa) in qualsiasi altro punto del processo di acquisizione degli input - quando gli utenti vogliono verificare le opzioni prima di digitare qualcosa, o mentre loro " Ho già preso qualcosa nel campo di input.

3. Entra nel Elemento HTML .

Scegliamo il secondo metodo, in quanto è più semplice, e può essere usato come meccanismo di fallback nei browser che non supportano il elemento. Quando un browser non può visualizzare e visualizzare il datalist, esegue il rendering di Tag HTML, il codice ha il seguente aspetto:

Per visualizzare tutte le opzioni di select nell'elenco a discesa, dobbiamo utilizzare gli attributi multiple per mostrare più opzioni e le size per il numero di opzioni che vogliamo mostrare.

 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 è l' assenza di un modo diretto per lo stile  elemento con CSS (l'aspetto del  e