Estás leyendo la publicación: Cómo crear un cuadro de texto de autocompletar JQuery con un ejemplo
JavaScript le da vida a la interfaz de usuario de las aplicaciones en línea y los formularios web. 💫
Puede usar JS para crear experiencias en línea altamente interactivas, lo que habría sido un desafío usando solo HTML y CSS. La biblioteca de jQuery UI cuenta con muchas interacciones, widgets, temas, efectos y utilidades que puede usar fácilmente. Uno de esos widgets útiles es .
Piense en cómo Google le ahorra tiempo con sugerencias de autocompletar mientras busca en línea.
jQuery Autocompletar puede ayudarlo a implementar una funcionalidad similar en su aplicación web o formulario. Ofrecer dicha funcionalidad a los usuarios puede ayudarlo a:
- Suavizar la experiencia del usuario
- Reducir la demanda cognitiva
- Evite errores de escritura
Puede usar el widget jQuery Autocompletar con los elementos HTML: cuadro de texto, área de texto y entrada. Se activa en un evento clave y muestra las sugerencias de autocompletar a los usuarios cada vez que escriben algo en el campo.
En esta publicación de blog, le mostraré un ejemplo de selección de cuadro de texto de jQuery Autocompletar a través de la matriz y la base de datos. 😃
jQuery Autocompletar Ejemplo + Código
En este ejemplo, he usado el widget jQuery Autocompletar para obtener sugerencias para los estados y territorios de los Estados Unidos. La función se activará cuando comience a escribir en el cuadro de texto. Por ejemplo, al escribir las letras ‘al’ en el cuadro de texto, el widget jQuery Autocompletar busca en toda la matriz o base de datos (si está conectada) y obtiene todos los resultados coincidentes que contienen el texto ingresado, que son ‘Alabama’ y ‘Alaska’ en este caso.
En el ejemplo anterior, utilicé una matriz para declarar la lista de todos los estados y territorios de los Estados Unidos. Puede tomar el siguiente código como referencia:
< title>jQuery UI Autocompletar: funcionalidad predeterminada < enlace rel="hoja de estilo" href="http://meetanshi.com/resources/demos/style.css">
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 dieciséis 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
|
jQuery Autocompletar desde la base de datos
En lugar de usar una matriz, también puede configurar la base de datos como fuente para mostrar sugerencias de autocompletar. Por ejemplo, usé el siguiente código para obtener el autocompletado jQuery de la base de datos usando la codificación JSON:
var productos disponibles = ; $(documento).on(‘focusout keyup’, ‘.invoice_item’, función (índice, valor) { boxId = jQuery(this).attr(‘id’); $(“#”+boxId).autocompletar({ fuente: productos disponibles, }); });
|
var productos disponibles = ; $(documento).on(‘focusout keyup’, ‘.invoice_item’, function (índice, valor) { boxId = jQuery(esto).attr(‘id’); $(“#”+boxId).autocompletar({ fuente: productos disponibles, }); }); |
¡Eso es todo! Así es como puede usar el widget jQuery Autocompletar para mostrar sugerencias de entrada en el campo de texto.
Si aún tienes dudas con respecto a esta solución, puedes mencionarlas en los comentarios; ¡Estaré encantado de ayudarte! 😇
Anteriormente, mi colega le mostró un método para recargar la página actual sin perder ningún dato del formulario a través de JavaScript, que le gustaría implementar en su aplicación web o formulario.
¿Te encantó esta publicación? ¡Califíquelo con 5 estrellas y compártalo con sus amigos expertos en tecnología! 😃
¡Gracias por leer! 🍀
