Jak stworzyć edytowalny kombobox w JavaScript

W JavaScript Combobox to kombinacja rozwijanej listy z edytowalnym polu tekstowym. Jest dodawany na stronach internetowych, aby użytkownicy mogli wybrać element z określonej listy rozwijanej i mogą zmienić jego wartość poprzez pisanie. Można go wykorzystać w wymianie znacznika HTML, ponieważ tekst nie można wprowadzić w polu Wybierz. JavaScript Combobox oferuje również zintegrowaną funkcjonalność filtrowania i szeroki zakres opcji filtrowania za pomocą „Datalist".

Ten blog poprowadzi Cię przez proces tworzenia edytowalnego kombobox w JavaScript.

Jak stworzyć edytowalny kombobox w JavaScript?

Możesz stworzyć edytowalny kombobox za pomocą „Datalist". W HTM użyj znacznika z znacznikiem w JavaScript, utwórz element zestawu danych za pomocą „dokument.createElement ()”Metoda z szeregiem opcji, które zostaną dodane do listy rozwijanej.

Zbadajmy kilka przykładów określonej koncepcji.

Przykład 1: Utwórz edytowalny kombobox w HTML
W tym przykładzie utworzymy kombobox dla listy owoców w HTML za pomocą znacznika. Aby to zrobić, dodaj nagłówek, etykietę i pole wejściowe z „owoce„Lista jako identyfikator danych danych:

Combobox za pomocą HTML:

Lista owoców:

Następnie użyj znacznika HTML, przypisz go „owoce”Identyfikator i lista wymaganych opcji:

Ponieważ lista rozwijana z wieloma opcjami wymaga dodatkowego wysiłku, aby przejrzeć dostarczone opcje, ComboBox pozwala filtrować listę obok siebie, wpisując w polu tekstowym:

Powyższe dane wyjściowe pokazuje listę owoców. Wpisaliśmy „M”W polu wejściowym, które odfiltrowało nazwy owoców, które zawierają„M" Lub "M". W rezultacie wybraliśmy pożądaną nazwę owoców, zaczynając od pismowej litery.

Przykład 2: Utwórz edytowalny kombobox za pomocą JavaScript
Tutaj wykonamy to samo zadanie za pomocą JavaScript. W tym celu najpierw stworzymy nagłówek i etykietę. Następnie dodaj pole tekstowe wejściowe i ustaw jego identyfikator „owoc”I lista„lista owoców”:

Combobox za pomocą HTML:

Lista owoców:

Postępując zgodnie z danymi krokami, utworzymy Combobox w JavaScript:

• Najpierw zdefiniuj „Combobox ()”Funkcja w pliku JavaScript, który zawiera tablicę opcji rozwijanych przechowywanych w zmiennej„Combovalues".
• Następnie utwórz element „Datalist" używając "dokument.createElement ()" metoda.
• Następnie ustaw identyfikator kombolisty, aby „lista owoców”To jest dodawane w znaczniku HTML.
• Zastosuj pętlę Foreach, aby dołączyć listę opcji rozwijanej, tworząc element ”opcja”Dla każdego z dodanych wartości Combobox.
• Wywołaj funkcję Combobox () na końcu.

funkcja combobox ()
var combovalues ​​= [„pogranate”, „jabłko”, „brzoskwinia”, „moreprot”, „winogrona”, „banana”, „pear”, „kiwi”, „trurawberry”, „cherry”, „Orange”, „mango”, „mango”, „mango „,„ Pineapple ”,„ melon ”,„ awokado ”,„ Water Melon ”];
var kombokolist = dokument.CreateElement („DataList”);
kombolista.id = "fruit_list";
Combovalues.foreach (combovalues ​​=>
var option = dokument.createElement („opcja”);
opcja.innerhtml = kombinacze;
opcja.wartość = kombinacze;
kombolista.appendChild (opcja);
)
dokument.ciało.appendchild (kombolista);

combobox ();

Wyjście

Można zauważyć, że możemy również edytować wartość Combobox po wybraniu jej z dostępnej listy:

Zebraliśmy najlepsze rozwiązania do tworzenia edytowalnego kombobox w JavaScript i HTML.

Wniosek

Aby stworzyć edytowalny kombobox, możesz użyć elementu „Datalist". W HTML użyj znacznika za pomocą znacznika w JavaScript, możesz utworzyć element danych za pomocą „dokument.createElement ()”Metoda z szeregiem opcji, które zostaną dodane do listy rozwijanej. W tym poście na blogu zademonstrowaliśmy procedurę tworzenia edytowalnego czołowego w JavaScript, a także w HTML.