Come creare un combobox modificabile in javascript

In JavaScript, il CompoBox è la combinazione di un elenco a discesa con una casella di testo modificabile. Viene aggiunto su pagine Web in modo che gli utenti possano selezionare un elemento da un elenco a discesa specificato e può modificare il suo valore digitando. Può essere utilizzato in sostituzione del tag HTML perché il testo non può essere inserito nel campo Seleziona. JavaScript ComboBox offre anche funzionalità di filtraggio integrato e una vasta gamma di opzioni di filtraggio con l'aiuto di "datatalista".

Questo blog ti guiderà attraverso il processo di creazione di un combobox modificabile in javascript.

Come creare un combobox modificabile in javascript?

Puoi creare un combobox modificabile con l'aiuto di "datatalista". In HTM, utilizzare il tag con tag mentre in JavaScript, crea un elemento di set di dati utilizzando "documento.createElement ()"Metodo con una serie di opzioni che verranno aggiunte all'elenco a discesa.

Esaminiamo alcuni esempi del concetto dichiarato.

Esempio 1: crea un combobox modificabile in HTML
In questo esempio, creeremo un combobox per l'elenco dei frutti in HTML usando il tag. Per fare ciò, aggiungi un'intestazione, un'etichetta e un campo di input con "frutta"Elenco come ID del datatalista:

ComboBox usando HTML:

Elenco di frutta:

Quindi, usa il tag HTML, assegnalo "frutta"ID e un elenco di opzioni richieste:

Poiché l'elenco a discesa con più opzioni richiede uno sforzo extra per esaminare le opzioni fornite, il CompoBox consente di filtrare l'elenco fianco a fianco digitando nel campo di testo:

L'output sopra mostra l'elenco dei frutti. Abbiamo digitato "M"Nel campo di input, che ha filtrato i nomi di frutta che contengono"M" O "M". Di conseguenza, abbiamo selezionato il nome di frutta desiderato a partire dalla lettera digitata.

Esempio 2: crea un combobox modificabile usando JavaScript
Qui eseguiremo lo stesso compito usando JavaScript. Per questo, creeremo prima un'intestazione e un'etichetta. Quindi, aggiungi un campo di testo di input e imposta il suo ID "frutta"E l'elenco"Fruit_list":

ComboBox usando HTML:

Elenco di frutta:

Seguendo i passaggi indicati, creeremo un combobox in JavaScript:

• Innanzitutto, definisci un “casella combinata()"Funzione in un file JavaScript che contiene un array delle opzioni a discesa memorizzate in variabile"Compovaui".
• Quindi, crea un elemento "datatalista" usando il "documento.createElement ()" metodo.
• Successivamente, imposta l'ID del combolista su "Fruit_list"Questo viene aggiunto nel tag HTML.
• Applica il ciclo foreach per aggiungere l'elenco delle opzioni a discesa creando un elemento "opzione"Per ciascuno dei valori COMBOBOX aggiunti.
• Invoca la funzione combobox () alla fine.

funzione comboBox ()
VAR COCOVALUES = ['melograno', 'Apple', 'Peach', 'Aprichot', 'Grapes', 'Banana', 'Pear', 'Kiwi', 'Strawberry', 'Cherry', 'Orange', 'Mango ',' Ananas ',' melone ',' avocado ',' melone d'acqua '];
var combolist = documento.CreateElement ('Datalist');
Combolista.id = "Fruit_List";
Compovaui.foreach (combovaleUes =>
var opzione = documento.createElement ('opzione');
opzione.InnerHtml = COCBOVALUE;
opzione.value = coconvalues;
Combolista.appendChild (opzione);
)
documento.corpo.AppendChild (combolist);

casella combinata();

Produzione

Si può vedere che possiamo anche modificare il valore ComboBox dopo averlo selezionato dall'elenco disponibile:

Abbiamo raccolto le migliori soluzioni per la creazione di un combobox modificabile in JavaScript e HTML.

Conclusione

Per creare un combobox modificabile, è possibile utilizzare l'elemento "datatalista". In HTML, utilizzare il tag con il tag mentre in JavaScript, è possibile creare un elemento da datatalist usando "documento.createElement ()"Metodo con una serie di opzioni che verranno aggiunte all'elenco a discesa. In questo post sul blog, abbiamo dimostrato la procedura per la creazione di un Combbox modificabile in JavaScript e in HTML.