Cómo crear un Combobox editable en JavaScript

En JavaScript, el Combobox es la combinación de una lista desplegable con un cuadro de texto editable. Se agrega en las páginas web para que los usuarios puedan seleccionar un elemento de una lista desplegable especificada y puedan cambiar su valor escribiendo. Se puede utilizar en el reemplazo de la etiqueta HTML porque el texto no se puede ingresar en el campo Seleccionar. JavaScript ComboBox también ofrece funcionalidad de filtrado integrada y una amplia gama de opciones de filtrado con la ayuda de "lista de datos".

Este blog lo guiará a través del proceso de creación de un Combobox editable en JavaScript.

Cómo crear un Combobox editable en JavaScript?

Puede crear un combox editable con la ayuda de "lista de datos". En HTM, use la etiqueta con la etiqueta mientras está en JavaScript, cree un elemento de conjunto de datos usando el "documento.createElement ()"Método con una variedad de opciones que se agregarán a la lista desplegable.

Examinemos algunos ejemplos del concepto declarado.

Ejemplo 1: Crear un combox editable en HTML
En este ejemplo, crearemos un comboBox para la lista de frutas en HTML usando la etiqueta. Para hacerlo, agregue un encabezado, etiqueta y un campo de entrada con el "frutas"Lista como ID del DataList:

Combobox usando HTML:

Lista de frutas:

A continuación, use la etiqueta HTML, asigne el "frutasID y una lista de opciones requeridas:

Como la lista desplegable con múltiples opciones necesita un esfuerzo adicional para analizar las opciones proporcionadas, el Combobox le permite filtrar la lista de lado a lado escribiendo el campo de texto:

La salida anterior muestra la lista de frutas. Hemos escrito "METRO"En el campo de entrada, que filtró los nombres de la fruta que contienen"METRO" o "metro". Como resultado, hemos seleccionado el nombre de fruta deseado que comienza con la letra escrita.

Ejemplo 2: Crear un comboBox editable usando JavaScript
Aquí, realizaremos la misma tarea usando JavaScript. Para esto, primero crearemos un encabezado y una etiqueta. Luego, agregue un campo de texto de entrada y configure su ID "fruta"Y la lista"fruit_list":

Combobox usando HTML:

Lista de frutas:

Siguiendo los pasos dados, crearemos un Combobox en JavaScript:

• Primero, defina un "caja combo()"Función en un archivo JavaScript que contiene una matriz de las opciones desplegables almacenadas en variable"Combovalues".
• Entonces, crea un elemento "lista de datos" utilizando el "documento.createElement ()" método.
• Después de eso, establezca la identificación del combolista en "fruit_list"Eso se agrega en la etiqueta HTML.
• Aplique el bucle foreach para agregar la lista de opciones desplegables creando un elemento "opción”Para cada uno de los valores de comboBox agregados.
• Invoca la función ComboBox () al final.

function comboBox ()
var combovalues ​​= ['granada', 'manzana', 'durazno', 'albaricoque', 'uvas', 'plátano', 'pera', 'kiwi', 'fresa', 'cereza', 'naranja', 'mango ',' Piña ',' melón ',' aguacate ',' melón de agua '];
var combolist = documento.CreateElement ('DataList');
combolista.id = "fruit_list";
Combovalues.foreach (combovalues ​​=>
opción var = documento.createElement ('opción');
opción.innerhtml = combovalues;
opción.valor = combovalues;
combolista.appendChild (opción);
)
documento.cuerpo.appendchild (combolista);

caja combo();

Producción

Se puede ver que también podemos editar el valor de Combobox después de seleccionarlo en la lista disponible:

Hemos reunido las mejores soluciones para crear un Combobox editable en JavaScript y HTML.

Conclusión

Para crear un comboBox editable, puede usar el elemento "lista de datos". En HTML, utilice la etiqueta con la etiqueta mientras está en JavaScript, puede crear un elemento de datos utilizando el "documento.createElement ()"Método con una variedad de opciones que se agregarán a la lista desplegable. En esta publicación de blog, hemos demostrado el procedimiento de crear un peindonorable editable en JavaScript, así como en HTML.