Criando ComboBoxes Editáveis em JavaScript

Criar uma combobox editável, totalmente funcional e personalizável em JavaScript aprimora a interação do usuário, permitindo tanto a seleção a partir de uma lista predefinida quanto a entrada de novos valores. Este tutorial explora duas abordagens: uma implementação manual usando HTML, CSS e JavaScript, e uma abordagem simplificada utilizando a biblioteca Select2.

Sumário

• Método 1: Construindo uma Combobox Editável Personalizada
• Método 2: Usando a Biblioteca Select2
• Aprimorando sua Combobox Editável

Método 1: Construindo uma Combobox Editável Personalizada

Este método oferece controle granular e um profundo entendimento da mecânica subjacente. Combinaremos um campo de entrada para digitação e uma lista desordenada oculta para exibir as opções.

Primeiro, vamos configurar a estrutura HTML:


<div class="combobox">
<input type="text" id="comboboxInput" placeholder="Selecione ou digite...">
<ul id="comboboxList"></ul>
</div>


Em seguida, adicione o CSS para estilização:


.combobox {
position: relative;
display: inline-block;
}
.combobox input {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
}
.combobox ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #ccc;
background-color: white;
display: none; /* Oculto por padrão */
}
.combobox li {
padding: 5px;
cursor: pointer;
}
.combobox li:hover {
background-color: #f0f0f0;
}


Finalmente, o JavaScript para lidar com a funcionalidade:


const input = document.getElementById('comboboxInput');
const list = document.getElementById('comboboxList');
let options = ['Opção 1', 'Opção 2', 'Opção 3'];

input.addEventListener('input', () => {
list.innerHTML = '';
const filter = input.value.toLowerCase();
options.forEach(option => {
if (option.toLowerCase().includes(filter)) {
const item = document.createElement('li');
item.textContent = option;
item.addEventListener('click', () => {
input.value = option;
list.style.display = 'none';
});
list.appendChild(item);
}
});
list.style.display = input.value ? 'block' : 'none';
});

input.addEventListener('focus', () => {
list.style.display = 'block';
});

input.addEventListener('blur', () => {
setTimeout(() => {
list.style.display = 'none';
}, 100);
});

// Adicionar nova funcionalidade de opção (exemplo)
input.addEventListener('keydown', (event) => {
if (event.key === 'Enter' && !options.includes(input.value)) {
options.push(input.value);
list.style.display = 'none';
input.value = ''; //limpar entrada após adicionar
}
});


Método 2: Usando a Biblioteca Select2

Select2 simplifica significativamente o processo. Inclua os arquivos CSS e JavaScript do Select2 em seu projeto (você pode baixá-los do site oficial do Select2 ou usar um CDN). Em seguida, inicialize o Select2 em seu elemento select:


<select id="mySelect">
<option value="Option 1">Opção 1</option>
<option value="Option 2">Opção 2</option>
<option value="Option 3">Opção 3</option>
</select>

<script>
$('#mySelect').select2({
tags: true, // Habilita a adição de novas opções
allowClear: true // Permite limpar a seleção
});
</script>


A opção tags: true torna a combobox editável, permitindo que os usuários adicionem novas opções não presentes na lista inicial. A opção allowClear: true fornece uma maneira de limpar a seleção.

Aprimorando sua Combobox Editável

Independentemente do método escolhido, considere esses aprimoramentos:

• Persistência: Armazene as opções usando armazenamento local ou um banco de dados do lado do servidor para retê-las entre as sessões.
• Validação: Implemente a validação de entrada para evitar entradas inválidas.
• Estilização: Personalize a aparência usando CSS para integrar-se perfeitamente ao design do seu aplicativo.
• Fontes de Dados Remotas: Para conjuntos de dados grandes, busque opções dinamicamente usando chamadas AJAX.