Lista de Autocompletar

javiercito21 · #1 (**permalink**) 23/11/2009, 00:32

Hola!
Este es mi primer Post en este gran foro que me salvado muchas veces y que me permitido hacer muchas cosas.

Quiero implementar una lista de autocompletar y webeando encontre este sitio
www
devbridge
com/projects/autocomplete/

Soy nuevo con Ajax y estoy usando PHP, y me gustaria implementar esta lista con valores de BD, pero no se por donde empezar.

Agradeceria mucho una mano amiga.

Muchas gracias

catalon · #2 (**permalink**) 23/11/2009, 06:50

tienes montones de tutoriales y scripts para hacer eso en la web. Google "ajax autocompletar" y a la marcha jeje
un ejemplo:
formatoweb.com.ar/ajax/

El manual es bastante claro pero si necesitas cualquier cosa avisa ;)

javiercito21 · #3 (**permalink**) 23/11/2009, 11:21

Hola Catalon muchas gracias por la respuesta, ya he buscado en la web scripts para hacer la lista, y luego de varias horas de busqueda fueron 2 los que me ganaron que son
devbridge.com/projects/autocomplete/ y micodigobeta.com.ar/?p=106

Decidi quedarme con el primero, pero lamentablemente no se como adecuarlo.

El ejemplo que me pasas, me sirve para comprender como funciona ajax, porque como ya dije soy nuevo en esto.

Gracias ;)

catalon · #4 (**permalink**) 23/11/2009, 11:36

En la misma pagina k me pones te explican como adecuarlo. Intenta trastear un rato con el codigo e ir probando, si no te sale intenta ver cual es el error y veremos si podemos ayudarte ;)

ambigus · #5 (**permalink**) 23/11/2009, 14:23

Yo intento hacer algo similar. Pero quiero que cuando me salga la lista al hacer click en alguno de los resultados (palabras) me dirijan a una web determinana que yo le diga. La verdad no me funciona el código de Autocomplete todavía. Miren qué error cometí porfavor:

B]¿Vean mi código de Autocomplete JQuery?: [/B]

http://extremegamex.gofreeserve.com/...erfecto_9.html

La verdad no me funciona, y supongo que es por esto:

Código:

var options, a;
jQuery(function(){
  options = { serviceUrl:'service/autocomplete.ashx' };
  a = $('#query').autocomplete(options);
});

y quizá por esto:

Código:

{
 query:'Li',
 suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'],
 data:['LR','LY','LI','LT']
}

Pero no se dónde poner eso. Miren el código báse del HTML:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<link href="http://extremegamex.gofreeserve.com/jquery_autocomplete/local_2/styles/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://extremegamex.gofreeserve.com/jquery_autocomplete/local/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://extremegamex.gofreeserve.com/jquery_autocomplete/local/scripts/jquery.autocomplete.js"></script>
</head>
<body>
<input type="text" name="q" id="query" /
var options, a;
jQuery(function(){
  options = { serviceUrl:'http://extremegamex.gofreeserve.com/jquery_autocomplete/autocomplete.ashx' };
  a = $('#query').autocomplete(options);
});>
</body>
<div class="autocomplete-w1">
  <div style="width:299px;" id="Autocomplete_1240430421731" class="autocomplete">

    <div><strong>Li</strong>beria</div>
    <div><strong>Li</strong>byan Arab Jamahiriya</div>
    <div><strong>Li</strong>echtenstein</div>
    <div class="selected"><strong>Li</strong>thuania</div>
  </div>

</div>
</html>

La verdad no tengo ni idea de dónde poner ese archivo autocomplete.ashx que ni existe cuando descargas el pack:

http://www.devbridge.com/projects/au...uery/#download

Porfavor ayudenme

javiercito21 · #6 (**permalink**) 23/11/2009, 15:01

En las mismas que Ambigus me encuentro yo, en las paginas, aparecen los .js, pero no se entiende como hacer los llamados a las funciones para generar las llamadas a la bd.

No se que tan mal andare, pero segun entiendo el archivo autocomplete.ashx es en donde se genera la consulta, y se envia la respuesta.

Yo lo tengo estructurado de esta forma:

prueba1.html

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="autocomplete.js"></script>

<style type="text/css">
.autocomplete-w1 { background:url(img/shadow.png) no-repeat bottom right; position:absolute; top:4px; left:3px; /* IE6 fix: */ _background:none; _top:1px; }
.autocomplete { width:300px; border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE specific: */ _height:350px;  _margin:0px 6px 6px 0; overflow-x:hidden; }
.autocomplete .selected { background:#F0F0F0; }
.autocomplete div { padding:2px 5px; white-space:nowrap; }
.autocomplete strong { font-weight:normal; color:#3399FF; }

</style>
</head>

<input type="text" name="q" id="query" />
<script type="text/javascript">
  new Autocomplete('query', { serviceUrl:'service/autocomplete.php' });
</script>
<div class="autocomplete-w1">
  <div class="autocomplete-w2">
    <div style="width:299px;" id="Autocomplete_query" class="autocomplete">
      <div><strong>Li</strong>beria</div>
      <div><strong>Li</strong>byan Arab Jamahiriya</div>
      <div><strong>Li</strong>echtenstein</div>
      <div class="selected"><strong>Li</strong>thuania</div>
    </div>
  </div>
</div>


<body>
</body>
</html>

archivo autocomplete.php

Código PHP:

  <?php 
{ 
 query:'Li', 
 suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'], 
 data:['LR','LY','LI','LT'] 
} 
?>

¿Como recibir el parametro query y como responder con el suggestions?

catalon · #7 (**permalink**) 24/11/2009, 03:06

Por lo k puedo entender la cuestion es que esto:

Cita:

<?php
{
query:'Li',
suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'],
data:['LR','LY','LI','LT']
}
?>

Es el resultado k te deberia de dar, no es el codigo en si, solo es un ejemplo. Por lo tanto en tu .php deberias tener un codigo k haga un select de todos los datos k empiecen por "el valor de query" k le enviar por el get. Esos resultados son los "suggestions".
Por lo tanto tendras un php k recive una variable k se llama query k es lo k alguien escribe en el text box. Con ese valor de "query" haces un select de todas las palabras k empiecen por "query" y le metes esos valores en el array suggestions. El array data dice k es opcional y tampoco tengo muy claro para k sirve.

El array suggestions es lo k se recorrera luego para listar las palabras y el valor de query es la parte de la palabra k saldra en negrita.
Espero haberme explicado bien xDD

mayid · #8 (**permalink**) 24/11/2009, 19:39

Si te fijas aca:
http://www.forosdelweb.com/f91/busca...rfecto-755472/

Yo escribi un borrador bastante acabado para generar la respuesta json dinamicamente.

javiercito21 · #9 (**permalink**) 25/11/2009, 12:35

Gracias mayid, ahora ya genero el array en el archivo autocomplete.php segun la documentacion.

Ahora supongo que entra la parte de Ajax de como mandarme ese resultado al archivo prueba1.html y mostrarlos en la parte:

Código:

<div class="autocomplete-w1">
  <div class="autocomplete-w2">
    <div style="width:299px;" id="Autocomplete_query" class="autocomplete">
      <div><strong>Li</strong>beria</div>
      <div><strong>Li</strong>byan Arab Jamahiriya</div>
      <div><strong>Li</strong>echtenstein</div>
      <div class="selected"><strong>Li</strong>thuania</div>
    </div>
  </div>
</div>

Creo que se maneja con esto:

Código:

new Autocomplete('query', { 
    serviceUrl:'service/autocomplete.php,
    minChars:2, 
    maxHeight:400,
    width:300,
    deferRequestBy:100,
    // callback function:
    onSelect: function(value, data){
        alert('You selected: ' + value + ', ' + data);
      }
  });

Asi que se lo agregé a prueba1.html

Pero ese value y data en donde se asignan o como se manejaran??

Gracias por la ayuda