Veremos un ejemplo de como implementar jQuery UI Autocomplete en ASP.Net o también conocido como Autocompletar de jQueryUI. Podrás además descargarte el código fuente.
Hoy hablaremos de la colección de componentes jQuery UI, y en particular del control Autocomplete. En esta biblioteca de componentes basada en jQuery podremos encontrar interesantísimos controles y efectos visuales para la creación de modernas aplicaciones web.
jQuery UI Autocomplete
Con este artículo pretendo que veamos el código completo asociado a 2 ejemplos prácticos:
1. jQueryUI Autocomplete Ajax Básico: Este ejemplo es el uso sencillo del Autocompletar jQuery UI, con una configuración muy básica, y obteniendo los datos a partir de una llamada ASP.Net Ajax.
2. jQueryUI Autocomplete Ajax con Cache: Este otro ejemplo de Autocompletar jQuery UI lo completamos un poco más, además de la llamada Ajax, implementamos el uso de una cache para reducir las llamadas al Servidor.
jQueryUI Autocomplete ASP.Net Ajax Básico
Pero vallamos a la práctica. Lo primero que haremos será escribir el código para poner un simple input en una pagina web, y cuando escribamos, al menos 2 caracteres en el input, consultaremos un WebMethod (C#) que nos devolverá en formato JSON, la lista de las ciudades que coincidan con los caracteres tecleados.
El resultado sería el siguiente:
Pero comentemos un poco el código:
1. Inicialmente hacemos las referencias respectivas al css, y a las 2 bibliotecas (jQuery.js y jquery-ui-1.8rc3.custom.min.js)
2. Lo proximo que hacemos es asociar el input txtCiudad con el widget autocomplete de jQuery UI; aquí debemos comentar algunas opciones o propiedades que definimos, pero eso lo haré más adelante.
3. Posteriormente definimos la funcion “fnLlamadaError” que será ejecutada si ocurre algun error en la llamada Ajax al servicio web.
4. Dentro del <body>, incluimos el ScriptManager, necesario para poder hacer la llamada AJAX del PageMethod, podriamos haber usado la funcion Ajax de jQuery y en ese caso no sería necesario el control ScriptManager, pero me parece más simple el uso de los PageMethods.
5. Y por último, incluimos los controles HTML necesarios, en particular el control input “txtCiudad”.
Detallando las opciones del AutoComplete
En este código es donde asociamos el control “txtCiudad” con el widget Autocomplete de jQuery UI. Para el cual estamos definiendo 2 propiedades:
- Definimos la propiedad source del autocomplete asociandole una función, dentro de dicha función lo que hacemos es una llamada Ajax a nuestro servicio “PageMethods.ObtCiudades” (en este caso es un PageMethods, pero podría haber sido una llamada a un web services o un WCF). La llamada al PageMethods tiene 3 parámetros, el primero es el termino o cadena introducida en el input, el segundo parámetro es la función que ejecutaremos si todo marcha bien, y el tercer parámetro es la función que se ejecuta si algo marcha mal.
- El segundo parámetro minLength lo establecemos a 2, indicándole al Widget Autocompletar de jQueryUI, que debe lanzar la búsqueda después de escribir al menos 2 caracteres en el input.
PageMethods o Servicio ObtCiudades
Nota: En nuestro ejemplo hemos simulado la existencia de una lista de ciudades, en un caso real probablemente tengamos que consultar una base de datos. Además usamos en este ejemplo 2 clases que no definimos aquí porque no es el objetivo, pero puedes fácilmente intuir su estructura.
jQueryUI Autocomplete Ajax con Cache
Este segundo caso (jQuery UI Autocomplete) lo complicaremos un poco más, pero solo un poco, en realidad lo nuevo sería lo siguiente:
- Crearemos una especie de cache. Así si ya hemos realizado una búsqueda con un termino o cadena determinada, sí intentamos realizar la misma búsqueda pues no será necesario ir nuevamente a efectuar la consulta Ajax al servidor, pues ya tendremos el resultado en nuestra cache.
- Además agregaremos otro control input de Autocompletar jQuery UI.
- Agregaremos también un control de resultados (log) donde cada ves que escojamos una ciudad, se guardará o visualizará la ciudad seleccionada.
Pero como “vista hace fe…” veamos una imagen de la página web que haremos:
Es de suponer que los 2 input de las ciudades implementen el autocompletar de jQuery UI, y ambos controles compartirán la misma cache; pero veamos el código fuente de la página web:
Autocomplete jQuery UI con Cache, Código aspx
Este código es muy similar al mostrado en el primer ejemplo (jQueryUI Autocomplete ASP.Net Ajax Básico) y también su explicación, por ende solo comentaremos las cosas nuevas que hemos agregado:
En este código es donde asociamos el control “txtOrigen” con el widget Autocomplete de jQuery UI. Para el cual estamos definiendo 3 propiedades:
- Definimos la propiedad source del autocomplete asociandole una función. En esta función lo primero que hacemos es verificar si ya tenemos en cache la búsqueda solicitada, si ya existe devolvemos el resultado de la cache, en caso contrario lo que hacemos es una llamada Ajax a nuestro servicio “PageMethods.ObtCiudades” y guardar el resultado obtenido en cache.
- El segundo parámetro minLength lo establecemos a 2, indicándole al Widget Autocompletar de jQueryUI, que debe lanzar la búsqueda después de escribir al menos 2 caracteres en el input.
- El tercer parámetro select definiremos una funcion con el código que queremos se ejecute cada ves que seleccionemos una ciudad, en nuestro caso llamamos a la funcion log que pintará el resultado en un div que almacenará la historia de todas nuestras selecciones.
Nota: Este widget (jQuery UI Autocomplete) tiene algunas otras propiedades interesantes que te ayudan a personalizar su comportamiento, para más información visita la página oficial.
Artículos relacionados:
- Descargar el código fuente.
- jQuery Autocomplete Facebook en ASP.Net.
- jQuery UI Dialog.
- jQueryUI DatePickerPicker - Selector de Fecha.
- jQuery Selectores Resumen.
Hola Amigo, muy bueno tu post, me ha ayudado mucho, pero quisiera preguntrate como se podria realizar un autocompletado tipo gmail o hotmail, osea ingresar una direccion de email y despues ingresar otro y asi sucesivamente asi por ejemplo
ResponderEliminarprimer@hotmail.com, segund@hotmail.com, .....etc
si podrias ayudarme me serviría mucho, gracias. Saludos
Hola Yayo, muchas gracias por tu valoración, me alegra que te sea útil.
ResponderEliminarPara lo que me preguntas, una buena solución podría pasar por utilizar el jQuery autocomplete al estilo facebook, te recomiendo visites este enlace y veas si es este el automplete jquery que estas buscando:
http://www.emposha.com/javascript/fcbkcomplete.html
Suerte...
Hola miago Derbis, primero agradecerte por la rápida respuesta. estuve observando el ejemplo que me mencionaste, es muy interesante y si es lo que busco, pero el gren problema es que esta hecho para php, y yo manejo C# y asp .net, y no se si ese tipo de ejemplo como lo podria utilizar para asp .net?. saludos.
ResponderEliminarContinuando con mi pregunta, yo quiero utilizar algo parecido a tu ejemplo utilizando un WebMetod, pero por ejemplo he visto que para el usuao de este ejemplo utliza lo siguiente:
ResponderEliminar$("element").fcbkcomplete({
json_url: "fetched.txt",
cache: true,
filter_case: true,
filter_hide: true,
newel: true
});
ahora no se si en la ruta donde se coloca el "fetched.txt" se podría poner el nombre de una clase digamos donde esta el WebMtehod por ejemplo "Obtenerobjeto.cs".
Hola denuevo, he intenado colocar el nombre de una clase y me sale error, tal parece que no funciona con archivos de asp .net
ResponderEliminarHe visto el mismo ejemplo en esta pagina:
ResponderEliminarhttp://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/
donde tambien indica poner la ruta de una archivo php, pero parece que no funciona para asp .net, o no se si en que me estoy equivocando
Hola, en realidad no creo que funcione poniendo la clase (bueno de hecho ya me dices que no funciona). Probablemente, y digo probablemente, funcione poniendo un webmethod.
ResponderEliminarA ver, en realidad no he probado hacer nada concreto con ese autocomplete, pero si estas usando c# y asp.net podrias intentar en este automplete poner en la rura un webmethod, por ej:
$("element").fcbkcomplete({
json_url: PageMethods.ObtCiudades(),
cache: true,
filter_case: true,
filter_hide: true,
newel: true
})
Algo así, aunq te repito es lo que intuyo, no estoy seguro, si tengo un chance el fin de semana lo pruebo. Debes tener en cuenta que el pagemethod tendría que devolver un string con formato JSON.
Hola amigo Derbis deuevo por aqui molestandote :-), hice lo que me dijiste, pero la verdad me sale un error y es justamente es donde se quiere capturar la ruta, y pues como comprenderás no me captura nada. Bueno seguire haciendo algunos intentos haber que resulta. Saludos
ResponderEliminarHola Amigo Derbis, te comento que desistí por razones de tiempo de realizar el autocompletado con jquery. Utilice el control AutocompleteExtender para realizar lo que quería, uqe era por supuesto colocoar en una caja de texto varias palabras, pero tuve que sacrificar (si se pude llamar asi) el diseño pues yo quería realizar el efecto que tenia el autocoplete de la pagina que me mencionaste en este link:
ResponderEliminarhttp://www.emposha.com/javascript/fcbkcomplete.html
Pues me gustaría poder darle el efecto de que la palabra seleccionada se muestre en la caja de texto con un sombreado y un icono de eliminar.
Bueno espero no haberte aburrido con este largo comentario :-), pero aun así el ejemplo del autocomplete que esta en este post me es de mucha utilidad. Y muchas gracias por responder. Saludos desde Perú.
Hola Edu, he publicado recientemente un post que implementa el autocomplete con selección multiple:
ResponderEliminarhttp://www.esasp.net/2010/05/jquery-autocomplete-facebook-con-aspnet.html
Espero te sea útil.
De todas formas te comento que con jQueryUI autocomplete también puedes implementar la selección multiple...
Hola que tal,
ResponderEliminarVaya que esta bruto este post, me ha sido de gran utilidad, pero ahora quiero ponerlo en un Control (ascx) dentro de un Master Page pero no me ha funcionado.
Dentro del control, tengo el div y el Codigo del Script.
La pagina aspx que muestra el control tiene los .js .
Y el Maste Page tiene el Script Manager.
asi como te lo muestro, no funciona, que podria ser ??
Muchas gracias.
Saludos ¡¡¡
Muy bueno el post, una consulta.
ResponderEliminarHay alguna forma de traer una lista de palabras que tengo en la Base de Datos ya sea con o sin acentos porque me pasa que me trae todo bien, pero si alguna palabra tiene acento no me la trae ordenada y la idea es que me muestre alfabeticamente indistintamente si tiene o no acento. Espero se entienda mi idea.
Como puedes ver en mi sitio ahora los términos estan sin acentos ya que tengo ese problema.
Hola, no se si todavia sea tiempo de preguntar.... pero tengo una inquietud para que por favor me pudieran ayudar. Tengo problemas al traer nombres extensos y que el usuario de le BackSpace para quitar las letras del nombre traido por primera vez y nuevamente quiera buscar otro, el control se demora en responder, ya que me imagino que al llamar tantas veces al servidor este se bloquea y me entra por la funcion fnError y bloquea todos los procesos del autocomplete, inclusive hasta la pagina. Quisiera me den una luz de como solucionar ese error. Gracias
ResponderEliminarTrate de implementar este ejemplo usando MasterPage pero obtengo un error de "Object doesn't support this property or method"
ResponderEliminarExcelente post, mi duda es la siguiente, cuando sustituyo la lista creada manualmente por una consulta Linq sobre una base de datos (SQL), el autocompletar me devuelve “Undefined” en cada coincidencia de la de la consulta, es decir el programa no me marca error pero el Autocompletar me muestra la lista con varios “Undefined”, según las coincidencias, espero me puedas ayudar a resolver esta duda y felicidades por tu sitio
ResponderEliminarMuy buen Post!!
ResponderEliminarAnonimo 29 de Abril. Tuve ese mismo problema, tienes que tomar en cuenta que las propiedades id & value deben ser minusculas. La libreria al parecer parsea el JSON response como case sensitive string, y al no encontrar la propiedad establecida devuelve undefined.
Hola amigos alguien tendria este codigo pero en VB Y NO EN C#
ResponderEliminarse los agredeceria batante
Estoy utilizando el ejemplo de ajax básico y de manera ocasional y aleatoria me salta la
ResponderEliminarfnLlamadaError. Me indica "There was an error processing the request". Cómo puedo hacer que esto no ocurra? Gracias
El ejemplo esta muy bueno. Pero tengo una inquietud como hago el mismo ejemplo llamando los datos desde un xml.
ResponderEliminarHola mi amigo, antes que nada muy buen post, me ha sido de mucha utilidad. He intentado implementar el autocomplete dentro de un y no he tenido éxito.
ResponderEliminardentro de mi formview tengo las secciones de , y .
Espero me puedas ayudar.
Saludos
Hola, excelente post, pero existe un problema cuando se implementa en paginas dentro un master.page literalmente deja de funcionar.
ResponderEliminarSabes a que se debe y como solucionar dicho inconveniente?
MIL gracias de antemano.
Buenas Tardes, con ejemplo que pones como hago para dejar el id de la ciudad seleccionada en otro textbox. Gracias
ResponderEliminarAlguen puede ayudar como vincularlo con sql 2008
ResponderEliminarQuien es AutoCompleteResult?
ResponderEliminar