Creando ComboBox Editables en JavaScript

Crear un combobox editable completamente funcional y personalizable en JavaScript mejora la interacción del usuario al permitir tanto la selección de una lista predefinida como la entrada de nuevos valores. Este tutorial explora dos enfoques: una implementación manual utilizando HTML, CSS y JavaScript, y un enfoque simplificado que aprovecha la biblioteca Select2.

Tabla de Contenido

• Método 1: Construyendo un Combobox Editable Personalizado
• Método 2: Usando la Biblioteca Select2
• Mejorando tu Combobox Editable

Método 1: Construyendo un Combobox Editable Personalizado

Este método ofrece un control granular y una comprensión profunda de la mecánica subyacente. Combinaremos un campo de entrada para escribir y una lista desordenada oculta para mostrar las opciones.

Primero, configuremos la estructura HTML:


<div class="combobox">
<input type="text" id="comboboxInput" placeholder="Seleccionar o escribir...">
<ul id="comboboxList"></ul>
</div>


Luego, agrega el CSS para el estilo:


.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 defecto */
}
.combobox li {
padding: 5px;
cursor: pointer;
}
.combobox li:hover {
background-color: #f0f0f0;
}


Finalmente, el JavaScript para manejar la funcionalidad:


const input = document.getElementById('comboboxInput');
const list = document.getElementById('comboboxList');
let options = ['Opción 1', 'Opción 2', 'Opción 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);
});

// Agregar nueva funcionalidad de opción (ejemplo)
input.addEventListener('keydown', (event) => {
if (event.key === 'Enter' && !options.includes(input.value)) {
options.push(input.value);
list.style.display = 'none';
input.value = ''; //limpiar entrada después de agregar
}
});


Método 2: Usando la Biblioteca Select2

Select2 simplifica significativamente el proceso. Incluye los archivos CSS y JavaScript de Select2 en tu proyecto (puedes descargarlos del sitio web oficial de Select2 o usar un CDN). Luego, inicializa Select2 en tu elemento select:


<select id="mySelect">
<option value="Option 1">Opción 1</option>
<option value="Option 2">Opción 2</option>
<option value="Option 3">Opción 3</option>
</select>

<script>
$('#mySelect').select2({
tags: true, // Habilita la adición de nuevas opciones
allowClear: true // Permite borrar la selección
});
</script>


La opción tags: true hace que el combobox sea editable, permitiendo a los usuarios agregar nuevas opciones que no están presentes en la lista inicial. La opción allowClear: true proporciona una manera de borrar la selección.

Mejorando tu Combobox Editable

Independientemente del método que elijas, considera estas mejoras:

• Persistencia: Almacena las opciones usando almacenamiento local o una base de datos del lado del servidor para conservarlas entre sesiones.
• Validación: Implementa la validación de entrada para evitar entradas inválidas.
• Estilo: Personaliza la apariencia usando CSS para integrarlo perfectamente con el diseño de tu aplicación.
• Fuentes de datos remotas: Para conjuntos de datos grandes, obtén las opciones dinámicamente usando llamadas AJAX.