Autocompletar (AutoSuggest) con Prototype
Vamos a crear un tutorial de como crear un Autocompletar (AutoSuggest) utilizando dos librerías, Prototype version 1.6.0. y autocomplete.js. Para el ejemplo usaré la version no comprimida ya que si necesitamos debugear es menos complicado.
Captura de Autocompletar
Manos a la obra con el código:
Para el ejemplo usaré como pagina principal Test.html pero podríamos usar sin problemas páginas dinámicas (.asp, .php). También usaremos test.php que genera el XML a mostrar como listado de sugerencia.
Incluiremos las dos librerías nombradas más arriba y la hoja de estilos entre los tag <head></head>:
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/autocomplete.js"></script>
agregamos el estilo que necesitamos para el listado de sugerencias:
<!--Hoja de estilos--> <!--**--> <link rel="stylesheet" href="css/autocomplete.css" type="text/css" media="screen" charset="utf-8" />
Ahora solo nos resta poner la caja de texto con algo de Javascript, necesario para llamar a la clase Autocomplete de autocomplete.js para que haga la magia, de esta manera:
<!--Caja de texto-->
<!--**-->
<!--**-->
<input name="text" type="text" id="test_xml" style="width: 200px" onFocus="javascript:
var opcion = {script: function (input) { return ('test.php?input='+input); }, callback: function (obj) { $('xml_info').update('Se ha seleccionado: '+obj.id + ' ' + obj.value + ' (' + obj.info + ')'); }
};
var xml=new AutoComplete('test_xml',opcion);return true;" value="" />
Si deseas modificar el aspecto del listado, modifica a gusto la hoja de estilos autocomplete.css.
Les dejo un link para descargar los archivos necesarios para ejecutar el autosuggest.
También te puede Interesar
¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscribes a mi feed y obtienes artículos como este enviados a tu lector de feeds.
Comentarios
Dejame ver que puede ser, a mi me funciona perfecto en IE7 no lo probe en versiones anteriores. Si encuentro algun error, lo publico aqui. Saludos.
esta bueno el script del autocompletar pero me gustaria autocompletar con una base de datos en mysql
oye marca un error en la linea 54 en el caracter 4 dice que el objeto no acepta esta acción, yo tengo el IE 7, y nomas no funciona a que cres que se deba
lo que pasa que lo cargue en dreamweaver en el cual tengo como servidor apache y configure el sitio y todo ese show, de esa forma me marca el error que te menciono, la otra forma fue nadamas descomprumirlo y abrir el test.html solo asi no marca el error, pero no muestra las sugerencias, que es lo que puedo hacer?
hola muy bueno, me gustaria agregarle un boton que me deje ejecutar un script php de busqueda con la palabra sugerida o con la palabra que escribo en caso que no se encuentre. como se podria hacer?
saludos
hola marcos, es muy simple solo tenes que poner la caja de texto con el autosuggest y un boton tipo submit dentro de un formulario (form) en la propiedad action del form colocas la pagina php que contiene tu script de busqueda y listo, ha no te olvides de poner el metodo de envio Post o Get. Cualquier otra duda, ponelo aca y con gusto te contesto. Saludos.
Hola Que Tal… Me Parece Muy Bueno Este Aporte, Pero Como Integrarle Links a Las Categorias, Con Comprendo Como… Gracias..!
Muy bueno el tutorial, funciona perfectamente.
Lo tengo adaptado para un buscador y me gustaria saber como hacer que al seleccionar un item me ejecutase la busqueda ( pasarle el foco al foton o algo asi).
Gracias!
Amigo que tal, tengo el mismo problema con IE, cuando doy click a la información encontrada para retornar los datos al text me da el error que “el objeto no permite esta acción”. Tienes alguna respuesta.
Saludos
Esta bueno. Pues podrias darme una idea de como generar el XML con Mysql. Tengo una tabla lo cual tiene el la columna “titulo ” de mis canciones.
Espero tu respuesta
PARA SOLUCIONAR EL PROBLEMA EN INTERNET EXPLORE TENES QUE BORRAR LA LINEA 100 DEL ARCHIVO autocomplete.js
Hola a todos!
Me gustaría saber cómo puedo ejecutar el autocompletar pero sobre un listado que se busca antes.
Hasta el momento yo lo mostraba en un combobox y ahora me han pedido que lo muestre autcompletando.
Gracias.
Hola Walter.
Gracias por contestar.
Yo lo que tengo es un formulario con un combobox en el que muestro un listado con personas y ahora me han pedido que lo cambie por un campo de texto que haga el autocompletar sobre ese listado sin tener que hacer consultas a la base de datos por cada dato que se escriba.
Puede que sea algo muy básico pero no soy muy experta y ando un poco perdida. :S
Muchas gracias
Hola a todos no saben la gran ayuda que fue este ejemplo para mi asi que primero agardezco a quienes lo hicieron posible y segundo Stefania yo tambien queria hacer algo como lo que tu pedias asi que simplemente cambie abajo esto:
if (strtolower(substr(utf8_decode($verConfig["nombres"]),0,$len)) == $input)
{
$count++;
$aResults[] = array( “id”=>($i+1) ,”value”=>htmlspecialchars($verConfig["nombres"]), “info”=>htmlspecialchars($verConfig["departamento"]) );
//echo $aResults[$i];
}
Y ASI pasas los datos desde la base tu test.html Espero le sirva a alguien
aqui les dejo este link para http://marcaweb.com/descargas/aporte.rar
Saludos,
Uf que bien que por fin encontre esto, muy sencillo y bonito.
Una pregunta, cuando me de los resultados quiero llevar la palabra elegida a un buscador wordpress tipo midominio.com/?s=palabra
¿Como puedo hacerlo?
Gracias
Archirrequeterecontra magnifico aporte. Muchisimas gracias a quienes pusieron (y complementaron) esta informacion, simple y sencillo de usar. Reitero, muchas grax.
alguien puede crear este mismo ejemplo pero con el codigo para que lea de una base de datos mysql por ejemplo???
Hola, he descargado el aporte de Samuel (del 26 de Agosto) para que la consulta la vaya haciendo a una BD. Y en la página test.html, a la caja con autocompletar la he metido dentro de un formulario agregando FORM antes (método post o get) y un botón tipo submit al final. De esta manera, los valores son enviados a otra página (php) donde obtengo el valor de la variable “text” que me arroja el resultado de la búsqueda seleccionada en la pagina text.html
Mi pregunta es: ¿Es posible que los valores enviados sean por ejemplo el ID original que tiene el registro seleccionado en la BD y que viajen por ejemplo dos valores: Id (el ID original en la BD, no el que se va generando en la búsqueda) y text (el registro seleccionado a apartir de la cadena de texto escrita)? He estado varias horas sin saber cómo hacer esto, agradecería ayuda, seguro que a otros les podría también ser útil. Gracias.
Hola , he probado con explorer,cuando doy click a la información encontrada para retornar los datos al text me ocurre un error que dice que el objeto no permite esta acción, sabes a que se debe???