Sábado ~ Noviembre 11, 2006

Recopilacion de Autocomplete y Suggest

El suggest, a mi entender es una de las utilidades web que más iremos viendo implementada en muchos sitios web, principalmente debido a que es realmete útil y lo ha demostrado en la herramientas de escritorio.

suggest_search.png

El suggest como su nombre indica es sugiere palabras que aún no has pedido, gracias a las primeras letras de la palabra el script realiza una llamada en Ajax al servidor que se encarga de realizar otra llamada a la base de datos (o fichero de datos)  solicitando las palabras que comienzen, contengan o finalicen con esas letras, mostrandolas en un desplegable o cambiando el texto del input desde donde escribes. De esta forma las búsquedas son mucho más certeras y cómodas para el usuario.

Por ese motivo no paran de salir versiones sobre esta utilidad, versiones en javascript que utilizan librerías más o menos pesadas, más o menos estilos, pero sin duda igual de prácticos.

Autocomplete de phpguru.org. [Home][Demo][Descargar]

Un desplegable muy simple pero usable y además es compatible con todos los navegadores.

WICK AutoComplete [Home][Demo][Descargar

Una versión muy simple pero mucho más clara que la anterior. Usa un código completamente no intrusivo respetando la semántica y la accebilidad.

Script.aculo.us Autocompleter [Home][Demo]

Sin duda el más conocido y posiblemente el más utilizado. Integrado en la librería el suggest está repleto de efectos y detalles que lo hacen realmente interesante para cualquier proyecto, pero esto juega en su contra ya que el uso de tanto efecto y detalles implica un aumento de peso del código necesario. La versión ajax de este script es obra de Gabriel Lanzani, ¿os suena de algo

BComplete Autosuggest Script [Home][Descargar

Versión de suggest muy elegante y muy bien terminada. Destaca por su elegante diseño a la hora de mostrar los posibles resultados.

Autocompletition by Wiseguysonly [Home][Demo][Descargar

Quizas la versión para impacientes, muy simple y para mi poco útil, ya que no te permite seleccionar la opción que desees mediante el uso del teclado. Necesitas el ratón para seleccionar.

Autocomplete control with dropdown [Home][Demo][Descargar

Este script usa el elemento <input /> desde donde se solicita para ir sugiriendo la palabra en el mismo <input />. No permite la validación del código debido a que necesita un atributo no válido en nuestro <input />. Probado en IE 5 y superiores y Mozilla.

AutoSuggest: An AJAX auto-complete text field [Home][Demo][Descargar]

Muy util script que recoge la información de un fichero XML. El diseño es algo simple, pero nada que un poco de CSS no pueda arreglar :D

Ajax dynamic list [Home][Demo][Descargar

Versión del suggest de los chicos de dhtmlgoodies, muy elegante.

AutoSuggest [Home

Otro script bastánte simple y por lo tanto bastante ligero que nos permite disponer de un suggest fácil de implementar y usar.

XMLHttpRequest Autocomplete [Home]

 Se supone que es una versión basada en Ajax que nos devuelve los datos del servidor… pero no he logrado hacerlo funcionar…

GMail-style text completion for text input element [Home

Una versión muy usable, nos muestra de forma clara en que lugar aparecen las letras que estamos buscando, de tal forma que nuestra búsqueda será más óptima todavía.

Nitobi AJAX components demo [Home][Demo

Un resultado muy cuidado y bonito, quizas los mejores que he visto, pero necesitas crear un código muy especial para conseguir que funcione.

Capxous framework [Home][Descargar

El más elegante de todos, es el que más me ha gustado, lástima que necesite una licencia de $99 (para uso personal) o $399 (para uso coorporativo) para poder eliminar el “Powered by CAPXOUS” de su código. Sin duda la mejor opción.

Quizas te pueda interesar

14 Responses to “Recopilacion de Autocomplete y Suggest

Pingback

Comentarios

1

0_o! no hay ninguno q utilice moo.fx con moo.ajax on las mootools?! impresionante..

# Antares -- 11/11/06 - 10:00 am Responder
2

Anieto una pregunta y el suggest que pones como imagen de referencia como se llama :) ese que sale las busqueda con el numero de resultados

# CalinSoft -- 11/11/06 - 2:23 pm Responder
3

El de Google, el primero de los suggest.
http://www.google.com/webhp?complete=1

# aNieto2k -- 11/11/06 - 3:42 pm Responder
4

Colega lo felicito por su trabajo¡! en unos dias pienso llenar una base de datos con las cosas mas comunes que se utilisan en la web y si ud me lo permite quiciera poner un link para que la puedan usar cuando gusten.
Exitos.

# Victorenlaweb -- 22/11/06 - 8:13 pm Responder
5

Hola!

Pues yo acabo de terminar una clase de autocompletar basada en mootools. Aún no he agregado efectos pero es fácil meterlos.

Funciona bien en FF, Opera, IE6 e IE7, pero no en Safari y como no tengo fácil acceso a una mac (uso ubuntu), pues no he podido ver qué sucede mal.

Utiliza JSON para el intercambio de datos con el servidor.

Agradecería mucho si alguien pudiera echarle un ojo en Safari y diera una pista de cuál es el problema.

El ejemplo está disponible en http://emb.com.mx/sandbox/autocomplete.php5

Mr. ANieto, un gran saludo!

# Ernesto -- 30/03/07 - 11:44 pm Responder
6

#5 Ernesto, funciona perfecto sobre Safari. He podido hacerlo funcionar sin ningún problema. ¿Donde está el problema?

Está muy currado y te ha quedado muy elegante.

Enhorabuena.

# aNieto2k -- 30/03/07 - 11:59 pm Responder
7

aNieto,

Pues la verdad es que cuando la probé en Safari (solo una vez) se portaba de forma rara:

- al apretar cursor abajo, se seleccionaba un elemento después del deseado, o sea, se saltaba uno.

- no completaba la frase al dar clic, solo funcionaba a medias con las teclas de cursor y solo completaba al presionar enter.

Que bien que haya funcionado. Qué versión de Safari tienes?

De cualquier forma volveré a probarla en el safari latoso lo más pronto posible.

Muchas gracias ;)
Saludos

# Ernesto -- 31/03/07 - 2:01 am Responder
8

aNieto,

lo acabo de probar en una iMac con Safari 2.0.4 y no funcionó… :/

# Ernesto -- 31/03/07 - 2:10 am Responder
9

#7 Tienes razón con safari 2.0.4 hace alguna cosa rara. Yo había probado con WebKit que me va mejor para depurar, pero se comporta de forma diferente y funciona perfectamente.

En Safari hace cosas raras parece que por el keyup, ¿has probado a usar keydown?

# aNieto2k -- 31/03/07 - 11:12 am Responder
10

Usé onmousedown en un principio pero cambié a onmouseup por una razón importante que no recuerdo :P. voy a hacer el intento revisando los eventos y eso. Muchas gracias por todo. Excelente blog!

Saludos.

# Ernesto -- 02/04/07 - 10:38 pm Responder
11

De todo los que mire, el “Ajax dynamic list” de los chicos de dhtmlgoodies, fue el mejor. EXCELENTE

# Vivi -- 10/04/07 - 12:58 am Responder
12

aNieto Macho!! Tu web es brutal! una vez mas gracias por ayudarme a encontrar lo que necesitaba!!!

Aqui tienes un fan! jeej

# Alex garcia -- 11/02/08 - 7:55 pm Responder
13

Excelente recopilación,

Mi pregunta es como hacer para integrar con WordPress conectando a su base de datos? Quisiera verlo!

Saludos

# jeroguidi -- 01/03/08 - 1:55 am Responder

Deja un comentarioTop

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.

Esta web se encuentra sobre la licencia Creative Commons (Reconocimiento - Compartir igual) / Politicas de uso

Cerrar
Enviar por Correo