Como criar um ComboBox editável em JavaScript

Em JavaScript, o ComboBox é a combinação de uma lista suspensa com uma caixa de texto editável. É adicionado nas páginas da web para que os usuários possam selecionar um item de uma lista suspensa especificada e alterar seu valor digitando. Pode ser utilizado na substituição da tag html porque o texto não pode ser inserido no campo Selecionar. O JavaScript ComboBox também oferece funcionalidade de filtragem integrada e uma ampla gama de opções de filtragem com a ajuda de “Datalist”.

Este blog o guiará através do processo de criação de um ComboBox editável em JavaScript.

Como criar um ComboBox editável em JavaScript?

Você pode criar um ComboBox editável com a ajuda de “Datalist”. No HTM, use a tag com tag enquanto estiver em JavaScript, crie um elemento de conjunto de dados usando o “documento.createElement ()”Método com uma variedade de opções que serão adicionadas à lista suspensa.

Vamos examinar alguns exemplos do conceito declarado.

Exemplo 1: Crie um ComboBox editável em HTML
Neste exemplo, criaremos um ComboBox para a lista de frutas em HTML usando a tag. Para fazer isso, adicione um título, etiqueta e um campo de entrada com o “frutas”Lista como o ID do Datalist:

ComboBox usando HTML:

Lista de frutas:

Em seguida, use a tag html, atribua -a a “frutas”ID e uma lista das opções necessárias:

Como a lista suspensa com várias opções precisa de um esforço extra para analisar as opções fornecidas, o ComboBox permite filtrar a lista lado a lado digitando no campo de texto:

A saída acima mostra a lista de frutas. Nós digitamos “M”No campo de entrada, que filtrou os nomes de frutas que contêm“M" ou "m”. Como resultado, selecionamos o nome da fruta desejado, começando com a letra digitada.

Exemplo 2: Crie um ComboBox editável usando JavaScript
Aqui, realizaremos a mesma tarefa usando JavaScript. Para isso, primeiro criaremos um título e um rótulo. Em seguida, adicione um campo de texto de entrada e defina seu ID “fruta”E a lista“fruit_list”:

ComboBox usando HTML:

Lista de frutas:

Seguindo as etapas fornecidas, criaremos um ComboBox em JavaScript:

• Primeiro, defina um “caixa combo()”Função em um arquivo JavaScript que contém uma matriz das opções suspensas armazenadas na variável“Combateiações”.
• Então, crie um elemento “Datalist”Usando o“documento.createElement ()”Método.
• Depois disso, defina o ID do combustível como “fruit_list”Isso é adicionado na tag html.
• Aplique o loop foreach para anexar a lista de opções suspensas, criando um elemento “opção”Para cada um dos valores de ComboBox adicionados.
• Invoque a função ComboBox () no final.

function ComboBox ()
var combatevalues ​​= ['romã', 'maçã', 'pêssego', 'damasco', 'uvas', 'banana', 'pear', 'kiwi', 'morango', 'cereja', 'laranja', 'manga ',' Abacaxi ',' melão ',' abacate ',' melão de água '];
var combatolist = documento.createElement ('Datalist');
Combolista.id = "fruit_list";
Combateiações.foreach (Combatevalues ​​=>
op option = document.createElement ('opção');
opção.INNERHTML = Combatevalues;
opção.valor = combatevalues;
Combolista.appendChild (opção);
)
documento.corpo.ApndendChild (Combolista);

caixa combo();

Saída

Pode -se observar que também podemos editar o valor do ComboBox depois de selecioná -lo na lista disponível:

Reunimos as melhores soluções para criar um ComboBox editável em JavaScript e HTML.

Conclusão

Para criar um ComboBox editável, você pode usar o elemento “Datalist”. No HTML, utilize a tag com tag enquanto estiver em JavaScript, você pode criar um elemento de dados de dados usando o “documento.createElement ()”Método com uma variedade de opções que serão adicionadas à lista suspensa. Nesta postagem do blog, demonstramos o procedimento de criação de uma caixa de combinação editável no JavaScript, bem como em html.