Hvordan lage en redigerbar ComboBox i JavaScript

I JavaScript er ComboBox kombinasjonen av en rullegardinliste med en redigerbar tekstboks. Det legges til på websider slik at brukere kan velge et element fra en spesifisert rullegardinliste og kan endre verdien ved å skrive. Det kan brukes til erstatning av HTML -taggen fordi tekst ikke kan legges inn i SELECT -feltet. JavaScript ComboBox tilbyr også integrert filtreringsfunksjonalitet og et bredt spekter av filtreringsalternativer ved hjelp av "Datalist”.

Denne bloggen vil guide deg gjennom prosessen med å lage en redigerbar ComboBox i JavaScript.

Hvordan lage en redigerbar ComboBox i JavaScript?

Du kan opprette en redigerbar ComboBox ved hjelp av "Datalist”. I HTM, bruk taggen med taggen mens du er i JavaScript, lag et datasettelement ved hjelp av "dokument.CreateElement ()”Metode med en rekke alternativer som vil bli lagt til rullegardinlisten.

La oss undersøke noen få eksempler på det uttalte konseptet.

Eksempel 1: Lag en redigerbar ComboBox i HTML
I dette eksemplet vil vi lage en ComboBox for listen over frukt i HTML ved hjelp av taggen. For å gjøre det, legg til en overskrift, etikett og et inngangsfelt med "frukt”Liste som ID for datalisten:

ComboBox ved hjelp av HTML:

Fruktliste:

Deretter bruker du HTML -taggen, tilordner den "frukt”ID og en liste over nødvendige alternativer:

Ettersom rullegardinlisten med flere alternativer trenger ekstra innsats for å se på de medfølgende alternativene, lar ComboBox deg filtrere listen side om side ved å skrive inn tekstfeltet:

Ovennevnte utgang viser listen over frukt. Vi har skrevet "M”I inngangsfeltet, som filtrerte ut fruktnavnene som inneholder”M”Eller“m”. Som et resultat har vi valgt ønsket fruktnavn som starter med den skrevne bokstaven.

Eksempel 2: Lag en redigerbar ComboBox ved hjelp av JavaScript
Her vil vi utføre den samme oppgaven ved hjelp av JavaScript. For dette vil vi først lage en overskrift og en etikett. Legg deretter til et inngangstekstfelt og angi ID -en "frukt”Og listen”frukt_liste”:

ComboBox ved hjelp av HTML:

Fruktliste:

Ved å følge de gitte trinnene vil vi opprette en ComboBox i JavaScript:

• Først definer en "ComboBox ()”Funksjon i en JavaScript -fil som inneholder en rekke rullegardinmuligheter som er lagret i variabel”Combovalues”.
• Opprett deretter et element "Datalist" bruker "dokument.CreateElement ()”Metode.
• Etter det, sett ID -en til kombinasjonen til “frukt_liste”Som er lagt til i HTML -taggen.
• Bruk foreach -sløyfen for å legge til rullegardinlisten ved å opprette et element "alternativ”For hver av de ekstra ComboBox -verdiene.
• Påkalle ComboBox () -funksjonen på slutten.

funksjon comboBox ()
var Combovalues ​​= ['Pomegranate', 'Apple', 'Peach', 'Apricot', 'Grapes', 'Banana', 'Pear', 'Kiwi', 'Strawberry', 'Cherry', 'Orange', 'Mango ',' Ananas ',' melon ',' avokado ',' vannmelon '];
var kombinasjon = dokument.CreateElement ('Datalist');
kombinasjon.id = "frukt_list";
Combovalues.foreach (Combovalues ​​=>
var alternativ = dokument.CreateElement ('alternativ');
alternativ.indrehtml = Combovalues;
alternativ.verdi = Combovalues;
kombinasjon.vedlegg (alternativ);
)
dokument.kropp.AppendChild (Combolist);

comboBox ();

Produksjon

Det kan sees at vi også kan redigere ComboBox -verdien etter å ha valgt den fra den tilgjengelige listen:

Vi har samlet de beste løsningene for å lage en redigerbar ComboBox i JavaScript og HTML.

Konklusjon

For å lage en redigerbar ComboBox, kan du bruke elementet “Datalist”. I HTML, bruk taggen med taggen mens du er i JavaScript, kan du opprette et datalistelement ved hjelp av "dokument.CreateElement ()”Metode med en rekke alternativer som vil bli lagt til rullegardinlisten. I dette blogginnlegget har vi demonstrert prosedyren for å opprette en redigerbar kambox i JavaScript så vel som i HTML.