Crear un ComboBox editable en JavaScript
Usamos el campo de formulario de entrada en muchos lugares, especialmente cuando trabajamos con formularios HTML.
El campo de entrada solo nos permite tener una sola función, y es ingresar el texto dentro del campo de entrada. Y si desea agregar otra funcionalidad como una lista desplegable, debe usar otro elemento HTML para implementar eso.
¿Qué sucede si desea implementar ambas funcionalidades dentro del propio campo de entrada? ¿Es posible?
Sí, esto se puede hacer con la ayuda de un datalist. Usando datalist, podemos crear un ComboBox editable que logra simultáneamente dos funcionalidades (es decir, entrada de texto y lista desplegable).
Crear un cuadro combinado editable en JavaScript
A continuación tenemos un documento HTML que consta de una etiqueta label y una etiqueta script dentro de la etiqueta body. La etiqueta es solo un texto que ayudará al usuario a proporcionar información sobre el ComboBox.
Y usando la etiqueta script, hemos vinculado un archivo JavaScript dentro del cual escribiremos nuestro código.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label>List of Countries: </label>
<script src="./index.js"></script>
</body>
</html>
Producción :
List of Countries:
Si ejecuta el código, obtendrá el resultado anterior. Para crear un ComboBox editable en JavaScript, debemos seguir los pasos a continuación.
Paso 1: Crear un datalist en JavaScript
Nuestro objetivo es crear una combinación de un campo de entrada y una lista desplegable.
Primero, crearemos una lista datalist, luego crearemos un campo de entrada. Después de eso, agregaremos la datalist al campo de entrada.
Un elemento HTML datalist crea una lista que contiene un conjunto de opciones entre las que un usuario puede elegir. Las opciones dentro de la datalist están representadas por el elemento HTML option.
A continuación hemos creado una función llamada createDataList(), que creará la datalist. Dentro de esta función, creamos un array de valores donde especificamos todas las opciones que se muestran en la datalist.
Dependiendo de sus requisitos, puede agregar tantas opciones como desee a la datalist. Para crear un datalist, usaremos la función document.createElement() y pasaremos datalist como parámetro y almacenaremos la datalist dentro de la variable datalist.
Luego estableceremos una identificación para este datalist usando dataList.id. Para agregar las opciones almacenadas dentro de la variable valores a la datalist, definimos dentro del array; usaremos un bucle forEach para iterar sobre cada elemento del array.
Cada elemento del array se almacenará dentro de la variable value mediante el bucle forEach. Dentro de forEach, crearemos un elemento HTML option.
Este elemento HTML option se creará para cada opción en cada iteración.
function createDataList() {
var values =
['Afghanistan', 'Åland Islands', 'Albania', 'Algeria', 'American Samoa'];
var dataList = document.createElement('datalist');
dataList.id = 'country_list';
values.forEach(value => {
var option = document.createElement('option');
option.innerHTML = value;
option.value = value;
dataList.appendChild(option);
})
document.body.appendChild(dataList);
}
createDataList();
Usando el option.innerHTML, especificamos qué datos mostraremos después de seleccionar una opción particular de la lista. El option.value especifica qué datos se mostrarán cuando la lista esté visible.
Por ejemplo, si option.innerHTML = "IN" y option.value = "INDIA", cuando la lista esté visible, verá INDIA como la opción, pero después de seleccionar la opción INDIA, dentro el campo de entrada, obtendrá IN. En nuestro ejemplo, estamos configurando ambos valores de la misma manera.
Después de asignar un valor a nuestra opción, podemos agregar esa opción a la datalist. Finalmente, después de asignar todas las opciones a la datalist, podemos agregar la datalist a la etiqueta del cuerpo usando la función appendChild.
Al final, llamaremos a la función createDataList(), que creará la datalist. No olvide llamar a esta función; de lo contrario, no se creará la datalist.
Paso 2: agregar datalist a un campo de entrada
Ahora que hemos creado la datalist, podemos agregar esa lista al campo de entrada.
Para ello, primero tenemos que crear una etiqueta input dentro de nuestro documento HTML. En esta etiqueta input, tenemos que especificar algunos atributos como:
type: el tipo de datos que puede tomar el campo de entrada. En nuestro caso, estaremos ingresando el nombre del país, que es un texto, para especificar el tipo comotext.id: ID único para el campo de entrada.list: este es el atributo más importante, y este atributo debe especificarse si está utilizando undatalist. Aquí, el valor de este atributo será eliddel elementodatalist, que hemos especificado al crear el elementodatalist.
<input type="text" id="country" list="country_list">
Este fue todo el proceso de creación de un ComboBox editable en JavaScript. Ahora ejecuta el código dentro de su navegador para ver el resultado.
Después de cargar la página web dentro del navegador, si hace doble clic en el campo de entrada, mostrará la lista completa con las opciones que hemos definido dentro del datalist como se muestra arriba.
Si comienza a escribir las letras dentro del campo de entrada, también le mostrará la lista. Pero las opciones que se muestran en la lista pueden variar según las letras que escriba.
Arriba se muestra cómo podemos crear y usar un ComboBox editable con doble funcionalidad de campo de entrada y lista desplegable usando JavaScript.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn