Ayuda con script autocompletar JQUERY

neodani · #1 (**permalink**) 20/03/2010, 09:45

Buenas,

Tengo un problema con un script de autocompletar, no consigo hacerlo funcionar por mas vueltas que le doy, el script en cuestion es este

http://www.devbridge.com/projects/au...e/jquery/#demo

Despues de bajarme las librerias, css, etc... no hay un ejemplo de su funcionalidad, guiandome por lo que dice en la web he armado esta pagina, pero no funciona a pesar que la respuesta segun el firebug la recibo...

Código HTML:

Ver original<!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>Autocompletar con JQUERY</title>
<link rel="stylesheet" type="text/css" href="style.css" />
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
 
<script type="text/javascript">
$().ready(function() {
    var options, a;
    jQuery(function(){
      options = { serviceUrl:'autocomplete.txt' };
      a = $('#query').autocomplete(options);
    });
});
</script>
</head>
 
<body>
<input type="text" name="q" id="query" />
 
</body>
</html>

Fichero autocomplete.txt

Código:

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

¿Sabéis por qué no me aparece la caja de texto debajo del input con los resultados?

Muchas gracias de antemano!

Dany_s · #2 (**permalink**) 20/03/2010, 09:55

probá con este json

Código HTML:

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

neodani · #3 (**permalink**) 20/03/2010, 17:46

Cita:

Iniciado por Dany_s

probá con este json

Código HTML:

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

Uhm lo he probado pero sigue sin mostrar nada, yo creo que no es problema del json, sino en que no se muestran los resultados cuando escribo li

Una ayudita?

Muchas gracias de antemano!

Dany_s · #4 (**permalink**) 20/03/2010, 18:21

tenés un evento ready dentro de otro ready

tiene que quedar asi

Código HTML:

<!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>Autocompletar con JQUERY</title>
<link rel="stylesheet" type="text/css" href="style.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>

<script type="text/javascript">
var options, a;
jQuery(function(){
  options = { serviceUrl:'autocomplete.txt' };
  a = $('#query').autocomplete(options);
});
</script>
</head>

<body>
<input type="text" name="q" id="query" />

</body>
</html>

no va a encontrar li con minúscula, la busqueda esa es casesensitive, encuentra solo con Li

neodani · #5 (**permalink**) 21/03/2010, 05:33

Cita:

Iniciado por Dany_s

tenés un evento ready dentro de otro ready

tiene que quedar asi

Código HTML:

<!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>Autocompletar con JQUERY</title>
<link rel="stylesheet" type="text/css" href="style.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>

<script type="text/javascript">
var options, a;
jQuery(function(){
  options = { serviceUrl:'autocomplete.txt' };
  a = $('#query').autocomplete(options);
});
</script>
</head>

<body>
<input type="text" name="q" id="query" />

</body>
</html>

no va a encontrar li con minúscula, la busqueda esa es casesensitive, encuentra solo con Li

Buenas,

Que tonto soy! era porque estaba escribiendo "li" en lugar de "Li" al menos en el script que me descargué y eso era lo que confundió.

Si te fijas en la pagina original, en la primera caja de texto puedes escribirlo de cualquier forma que te lo encuentra, además veo que a mi solo me marca las dos primeras letras, en cambio en la pagina original le marca todas.

http://www.devbridge.com/projects/au...e/jquery/#demo

¿Cómo es posible? si el ejemplo que me he bajado es de ahí...

La foto de la izq como me queda a mi, la foto de la derecha como queda en la página

Qué falta?¿?

Muchas gracias de antemano!

mayid · #6 (**permalink**) 21/03/2010, 09:05

Es porque para la pagina de ejemplo seguramente usen un script PHP, que compara las cadenas sin importan mayusculas y minúsculas.

Si querés unscript para el lado servidor, que use mysql (lo vas a necesitar) pone BUSCADOR PERFECTO en este foro. Hay varias paginas escritas en ese hilo, pero la respuesta buena está en el final.

neodani · #7 (**permalink**) 21/03/2010, 12:30

Cita:

Iniciado por mayid

Es porque para la pagina de ejemplo seguramente usen un script PHP, que compara las cadenas sin importan mayusculas y minúsculas.

Si querés unscript para el lado servidor, que use mysql (lo vas a necesitar) pone BUSCADOR PERFECTO en este foro. Hay varias paginas escritas en ese hilo, pero la respuesta buena está en el final.

Estuve leyendo el post, creo que te referias a este
http://www.forosdelweb.com/f91/busca...72/index2.html

He comprendido la idea, el problema lo estoy encontrando al generar la estructura correcta de la respuesta json.

Probé con este ejemplo introduciendo yo los valores de suggestions para asegurarme que los introducia bien, pero no el script jquery no fue capaz de leerlo correctamente, no me mostró nada. Intuyo que la estructura no es del todo correcta, quizás tendría que postear esta parte del código en el foro PHP...

Código HTML:

Ver original$listado = mysql_query ("SELECT * FROM panelme_usuarios WHERE usuario like '%$busqueda%'");
$resultados = mysql_fetch_array($listado);
 
$return = "[{";
$return .= "query:$busqueda,";
$return .= "suggestions:[dani,soporte";
 
$return .= "]";;
$return .= "}]";

También he abierto un hilo en mysql, porque he leído la posibilidad de pasar los datos de la consulta SQL directamente a JSON y reducir tiempos, pero no se si es cierto o no, me gustaría contrastar vuestra opinión.
http://www.forosdelweb.com/f86/ciert...ciente-790057/

Gracias!

juaniquillo · #8 (**permalink**) 21/03/2010, 12:48

Necesitas que el Json sea bien formateado según la documentación:

Cita:

Important: As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently. Avoid frequent hand-editing of JSON data for this reason. JSON is a data-interchange format with syntax rules that are stricter than those of JavaScript's object literal notation. For example, all strings represented in JSON, whether they are properties or values, must be enclosed in double-quotes. For details on the JSON format, see http://json.org/.

Osea, que tanto las propiedades como los valores deben tener comillas dobles. Teniendo en cuenta tu PHP sería algo así:

Código PHP:

Ver original$return .= '"query": "'.$busqueda.'",';

mayid · #9 (**permalink**) 21/03/2010, 12:55

Ademas no estas parseando bien la respuesta mysql. Necesitas un bucle. Y eso es tema para el foro de PHP.

Cita:

$resultados = mysql_fetch_array($listado);
// falta un bucle foreach o algun otro que recorra los resultados
$return = "[{";
$return .= "query:$busqueda,";

No sabia que se podía pasar algo directamente de mysql a lado cliente. Habrá que esperar respuesta (=confirmación).

De cualquier manera, en el link de BUSCADOR PERFECTO esta publicado el codigo (propuesto) de lado servidor (si, ese es el link). El bucle que usé en ese caso fue este:

Cita:

while($palabra = mysql_fetch_array($listado)){

}

neodani · #10 (**permalink**) 21/03/2010, 13:10

Cita:

Iniciado por mayid

Ademas no estas parseando bien la respuesta mysql. Necesitas un bucle. Y eso es tema para el foro de PHP.

No sabia que se podía pasar algo directamente de mysql a lado cliente. Habrá que esperar respuesta (=confirmación).

De cualquier manera, en el link de BUSCADOR PERFECTO esta publicado el codigo (propuesto) de lado servidor (si, ese es el link). El bucle que usé en ese caso fue este:

Voy más allá mayid, siguiendo el consejo de juaniquillo lo intenté así, creando el json a manita.

Lo intenté así

Código PHP:

Ver original$return = '[{';
$return .= '"query": "'.$busqueda.'",';
$return .= '"suggestions": "[dani,soporte]",';
$return .= '"data": "[dani,soporte]"';
$return .= '}]';

Y también así

Código PHP:

Ver original$return = '[{';
$return .= '"query": "dani",';
$return .= '"suggestions": "["dani","soporte"]",';
$return .= '"data": "["dani","soporte"]"';
$return .= '}]';

Y he visto que por consola (firebug) en ambos caso me da un error en esta linea 292

response.suggestions is undefined
[Break on this error]
if if (response.suggestions.length === 0) { this.badQueries.push(response.query); }

Me está volviendo loco xDDD

Dany_s · #11 (**permalink**) 21/03/2010, 13:40

porqué comienza con corchetes?

si el valor de una clave es un array no tiene que estar entre comillas:
"["dani","soporte"]" por ["dani","soporte"]

imprimí tu json en el navegador y comprobá si está bien formado en este sitio: http://json.parser.online.fr/

mayid · #12 (**permalink**) 21/03/2010, 14:27

Ademas, no estas imprimiendo la respuesta!

Necesitas un echo para que efectivamente PHP publique algo.

Cita:

echo $return;

Jajajaja! Veo que estas perdido con PHP porque en tu ejemplo $busqueda no esta para nada definido.

neodani · #13 (**permalink**) 21/03/2010, 14:39

Creo haber descubierto porque no cogía bien el resultado, si la salida que generamos es json para que vamos codificar nuevamente con

echo json_encode($return);

He quitado esa linea y he hecho un simple echo y esta parte ha funcionado.

Código PHP:

Ver original$return = '{';
$return .= '"query": "da",';
$return .= '"suggestions": ["dani","soporte"],';
$return .= '"data": ["dani","soporte"]';
$return .= '}';
 
echo $return;

Adaptando este resultado a la consulta SQL podemos sacarlo así y completar el trabajo!

Código PHP:

Ver original<?php
 
$dbhost="localhost"; // servidor. Generalmente localhost si el archivo esta alojado en el servidor ya.
$dbusuario=""; // aqui debes ingresar el nombre de usuario
$dbpassword=""; // password de acceso para la base de datos
$db=""; // el nombre de la base de datos
$conexion = mysql_connect($dbhost, $dbusuario, $dbpassword); // hacemos la coneccion
mysql_select_db($db, $conexion); // conectamos con la base de datos
 
$busqueda = $_GET['query']; // esto representa a lo que el usuario esta escribiendo en el teclado
 
$listado = mysql_query ("SELECT * FROM tabla WHERE usuario like '%$busqueda%'");
 
$sugerencias=array();
while ($row = mysql_fetch_array($listado)){
    $sugerencias[]= '"'.$row[usuario].'"'; // Ponemos comillas dobles a las coincidencias
}
 
$return = "{";
$return .= '"query": "'.$busqueda.'",';
$return .= '"suggestions":[';
/*if (count($sugerencias)==0)
    $return .= '"No se encontraron resultados"';
else
    $return .= implode(",",$sugerencias);
*/
$return .= implode(",",$sugerencias);
$return .= "]";
$return .= "}";
 
echo $return;
 
?>

¿Qué os parece, me dejo algo?

Muchas gracias!

mayid · #14 (**permalink**) 21/03/2010, 14:51

Entonces funciona? Bien!

Me queda la duda de si te basaste en el ejemplo funcionando del BUSCADOR PERFECTO o no. Porque ahi en el link fuimos depurando varias veces el codigo, hasta llegar a esto, que es funcional, y que concide con lo que terminanste armando:

Código PHP:

  <?php  

$dbhost="sql203.gofreeserve.com"; // servidor. Generalmente localhost si el archivo esta alojado en el servidor ya.  

$dbusuario="gofre_3737366"; // aqui debes ingresar el nombre de usuario  

$dbpassword="ambigus9"; // password de acceso para la base de datos  

$db="gofre_3737366_juegos_lista"; // Seleccionamos la base con la cual trabajar  

 
$conexion = mysql_connect($dbhost, $dbusuario, $dbpassword); 

mysql_select_db($db, $conexion); 

 
 
$busqueda = $_GET['query']; // esto representa a lo que el usuario esta escribiendo en el teclado,por ej: 'Li'  

$listado = mysql_query("SELECT * FROM palabras WHERE palabra LIKE '$busqueda%'");  

 
 
if (mysql_num_rows($listado)>0){  

 
echo "{ 

  query:'".$busqueda."',  

  suggestions:[";  

   

while($palabra = mysql_fetch_array($listado)){ 

 
$enlace = $palabra['Links'] ; // donde "link" es el nombre de la tabla en mysql que contiene los enlaces  

$juego = $palabra['Titulo']; // lo mismo, esta es la tabla con el nombre del juego  

 
$array = "'<a href=\'".$enlace."\'>".$juego."</a>',";}; // end while 

 
$array = substr ($array, 0, strlen($array) - 1); // elimino ultima coma 

echo $array; 

echo "]}";  

} 

 
 
else{ // no hay conicidencias 

} 

 
?>

Esto está tomado del link, pero es el último ejemplo, no el primero.

neodani · #15 (**permalink**) 21/03/2010, 15:05

Cita:

Iniciado por mayid

Entonces funciona? Bien!

Me queda la duda de si te basaste en el ejemplo funcionando del BUSCADOR PERFECTO o no. Porque ahi en el link fuimos depurando varias veces el codigo, hasta llegar a esto, que es funcional, y que concide con lo que terminanste armando:

Esto está tomado del link, pero es el último ejemplo, no el primero.

La verdad es que vi algo, pero ese último código que has pegado no xD

Ahora solo nos queda saber si es más eficiente sacar el JSON directamente del MYSQL o no ;)

http://www.forosdelweb.com/f86/ciert...ciente-790057/

PD: Viste la idea del modal box en el otro post?
http://www.forosdelweb.com/f127/crea...de-out-788942/

Salu2!

Stackado · #16 (**permalink**) 13/10/2010, 12:51

Hola

bueno yo tengo una pregunta, espero no sea muy tarde para decirla, mi pregunta es en esta parte del codigo:

Código PHP:

Ver original$listado = mysql_query ("SELECT * FROM tabla WHERE usuario like '%$busqueda%'");
      $sugerencias=array();
      while ($row = mysql_fetch_array($listado)){
          $sugerencias[]= '"'.$row[usuario].'"'; // Ponemos comillas dobles a las coincidencias
      }

"usuario" que sifnifica o por que lo ponene?, no lo veo aparecer en alguna parte del codigo anterior.

Saludos.

neodani · #17 (**permalink**) 13/10/2010, 13:36

Cita:

Iniciado por Stackado

Hola

bueno yo tengo una pregunta, espero no sea muy tarde para decirla, mi pregunta es en esta parte del codigo:

Código PHP:

Ver original$listado = mysql_query ("SELECT * FROM tabla WHERE usuario like '%$busqueda%'");
      $sugerencias=array();
      while ($row = mysql_fetch_array($listado)){
          $sugerencias[]= '"'.$row[usuario].'"'; // Ponemos comillas dobles a las coincidencias
      }

"usuario" que sifnifica o por que lo ponene?, no lo veo aparecer en alguna parte del codigo anterior.

Saludos.

Buenas Stackado,

$row[usuario] significa que tienes una columna en tu tabla que se llama usuario, prueba así o con comillas simples $row['usuario']

Salu2!

juanpons14 · #18 (**permalink**) 23/04/2011, 10:20

Wow! No se como agradecerte esto. En tan solo 8kb de script y una simple consulta a MYSQL (Si! consulta a MYSQL!!!! xD) lo logré hacer.

Tengo que decir que el código que me funciono fue el de Mayid, ya que el otro no me funcionaba.

Código:

<?php  
$dbhost="sql203.gofreeserve.com"; // servidor. Generalmente localhost si el archivo esta alojado en el servidor ya.  
$dbusuario="gofre_3737366"; // aqui debes ingresar el nombre de usuario  
$dbpassword="ambigus9"; // password de acceso para la base de datos  
$db="gofre_3737366_juegos_lista"; // Seleccionamos la base con la cual trabajar  

$conexion = mysql_connect($dbhost, $dbusuario, $dbpassword); 
mysql_select_db($db, $conexion); 


$busqueda = $_GET['query']; // esto representa a lo que el usuario esta escribiendo en el teclado,por ej: 'Li'  
$listado = mysql_query("SELECT * FROM palabras WHERE palabra LIKE '$busqueda%'");  


if (mysql_num_rows($listado)>0){  

echo "{ 
  query:'".$busqueda."',  
  suggestions:[";  
   
while($palabra = mysql_fetch_array($listado)){ 

$enlace = $palabra['Links'] ; // donde "link" es el nombre de la tabla en mysql que contiene los enlaces  
$juego = $palabra['Titulo']; // lo mismo, esta es la tabla con el nombre del juego  

$array = "'<a href=\'".$enlace."\'>".$juego."</a>',";}; // end while 

$array = substr ($array, 0, strlen($array) - 1); // elimino ultima coma 
echo $array; 
echo "]}";  
} 


else{ // no hay conicidencias 
} 

?>

PD: Sé que el tema es viejo, pero tenia que agradecerlo igual ^^

juanpons14 · #19 (**permalink**) 25/04/2011, 09:53

Cita:

Iniciado por juanpons14

Wow! No se como agradecerte esto. En tan solo 8kb de script y una simple consulta a MYSQL (Si! consulta a MYSQL!!!! xD) lo logré hacer.

Tengo que decir que el código que me funciono fue el de Mayid, ya que el otro no me funcionaba.

Código:

<?php  
$dbhost="sql203.gofreeserve.com"; // servidor. Generalmente localhost si el archivo esta alojado en el servidor ya.  
$dbusuario="gofre_3737366"; // aqui debes ingresar el nombre de usuario  
$dbpassword="ambigus9"; // password de acceso para la base de datos  
$db="gofre_3737366_juegos_lista"; // Seleccionamos la base con la cual trabajar  

$conexion = mysql_connect($dbhost, $dbusuario, $dbpassword); 
mysql_select_db($db, $conexion); 


$busqueda = $_GET['query']; // esto representa a lo que el usuario esta escribiendo en el teclado,por ej: 'Li'  
$listado = mysql_query("SELECT * FROM palabras WHERE palabra LIKE '$busqueda%'");  


if (mysql_num_rows($listado)>0){  

echo "{ 
  query:'".$busqueda."',  
  suggestions:[";  
   
while($palabra = mysql_fetch_array($listado)){ 

$enlace = $palabra['Links'] ; // donde "link" es el nombre de la tabla en mysql que contiene los enlaces  
$juego = $palabra['Titulo']; // lo mismo, esta es la tabla con el nombre del juego  

$array = "'<a href=\'".$enlace."\'>".$juego."</a>',";}; // end while 

$array = substr ($array, 0, strlen($array) - 1); // elimino ultima coma 
echo $array; 
echo "]}";  
} 


else{ // no hay conicidencias 
} 

?>

PD: Sé que el tema es viejo, pero tenia que agradecerlo igual ^^

Tengo que rectificar una cosa. Me he dado cuenta que el código no está del todo bien. Solo devolverá un único resultado porque el "echo" está fuera del bucle.

Para que os devuelva varios resultados este es el código:

Código:

$busqueda = $_GET['query']; // esto representa a lo que el usuario esta escribiendo en el teclado,por ej: 'Li'
$listado = mysql_query("SELECT * FROM TUTABLA WHERE TUCAMPO LIKE '%$busqueda%'");  


if (mysql_num_rows($listado)>0){  

echo "{ 
  query:'".$busqueda."',  
  suggestions:[";  
   
while($palabra = mysql_fetch_array($listado)){ 

$user = $palabra['user_nicename'] ; // donde "link" es el nombre de la tabla en mysql que contiene los enlaces   

$array = "'".$user."',";
echo $array; 

}; // end while 

echo "]}";  
}

Atento a la parte de LIKE, si pones:

%$busqueda%
Buscará palabras que contienen lo que se escribe en el input text

%$busqueda
Palabras que empiecen por lo que se escribe en el input text

$busqueda%
Palabras que acaban con lo que se escribe en el input text

Un saludo!