Buscador perfecto

mayid · #31 (**permalink**) 24/11/2009, 19:03

Cita:

<?php
header('Content-type: application/json');

$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); // 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,por ej: 'Li'

$listado = mysql_query ("SELECT * FROM juegos_extrema_gamex WHERE Titulo LIKE '$busqueda%'");
$resultados = mysql_fetch_array($listado);

$return = "{"."\n\r";
$return .= "query:$busqueda,"."\n\r";
$return .= "suggestions:[";

foreach ($resultados as $palabra){

$enlace = $busqueda['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

$return .= "<a href='$enlace'>".$juego."</a>,";

};

$return .= "]"."\n\r";;

$return .= "} ";

//print_r($return);
echo json_encode($return);
?>

Lo que te marco en verde tiene que coincidir exactamente (con mayusculas y minusculas) con los nombres de los campos que creastes en mysql.

ambigus · #32 (**permalink**) 24/11/2009, 19:11

Mayid. Quiero aclararte que estás en toda la razón. Porque soy novato en esto y no tengo ni idea, pero estoy aprendiendo lentamente, claro.

. Si estoy copiando y pegando. Ahora la idea es trabajar bien en esto, dime ¿Qué debo hacer? y yo lo hago. Recomiendame algunos consejos y pues....manos a la obra

. De por sí la página SÍ la he hecho yo, eso si es autoría mia, pero lo de los códigos para el buscador aún no lo logro, y por eso necesito ayuda.

.

Perdón si te he ofendido, o si soy muy vago.

Espero una pronta respuesta.

.

Código de avance:

Código PHP:

  <?php

header('Content-type: application/json');

 
$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); // 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,por ej: 'Li'

 
$listado = mysql_query ("SELECT * FROM gofre_3737366_juegos_lista WHERE $juegos_extrema_gamex='$busqueda'");

$resultados = mysql_fetch_array($listado);

 
 
$return = "{"."\n\r";

$return .= "query:$busqueda,"."\n\r";

$return .= "suggestions:[";

 
foreach ($resultados as $palabra){

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

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

 
$return .= "<a href='$enlace'>".$juego."</a>,";

 
};

 
 
$return .= "]"."\n\r";;

 
$return .= "} ";

 
 
//print_r($return);

echo json_encode($return);

?>

Esta sería la forma correcta, ¿Verdad?:

Código PHP:

  $listado = mysql_query ("SELECT * FROM gofre_3737366_juegos_lista WHERE $juegos_extrema_gamex='$busqueda'");

Espero una pronta respuesta.

mayid · #33 (**permalink**) 24/11/2009, 19:12

Cita:

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

Esto me resulta la mar de simple. Reemplaza esa ruta por el nombre de tu archivo php. Es decir, vos no vas a usar ashx sino php. O sea que el autocompleter se tiene que comunicar con el script que estamos escribiendo, y este es el renglon en donde se le dice a tu buscador en donde esta el scritp PHP.

ambigus · #34 (**permalink**) 25/11/2009, 08:26

Si tienes razón. Pero me pregunto yo: ¿En qué lo encierro?. Mira el código que tengo, la verdad nose si está bien respecto del original para que me funcione:

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>

Primeramente, no se dónde ni cómo envolverlo:

Código:

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

Y segundo, ¿Dónde se pone esto:

Código:

<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>

¿Antes del Head?, ¿Entre el el Head y el Body? ó ¿Después del Body?

Espero una pronta respuesta...

mayid · #35 (**permalink**) 25/11/2009, 09:00

Estas muuy mareado.

Tenes que tener un par de cosas en claro para seguir:
- que es un script.
- que diferencia hay entre pagina estaticas y paginas dinamicas.
- que es un lenguaje de lado servidor.

Leete esto:
http://eats.wordpress.com/2007/01/17...-lado-cliente/

y esto:
http://www.desarrolloweb.com/articulos/239.php (sabiendo que jQuery, que es lo que estas usando para el autocompleter, no es otra cosa que javascript).

mas esto:
http://www.desarrolloweb.com/articulos/243.php

ambigus · #36 (**permalink**) 25/11/2009, 21:18

Hola Mayid. Te agradesco por la documentación y pues te comparto el hecho de que ya comprendo a qué te refieres. Mi página busca ser dinámica pues interactua con Javascripts y lenguaje del lado del servidor (MySQL). Pero, me hace falta saber: ¿En qué código se envuelve esto:

Código:

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

¿Y dónde va esto?:

Código:

<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>

Supongo que debe ser en un archivo de estilo .css, nose sólo lo supongo, quizá en el mismo HTML. Aquí está la página de fuente:

http://www.devbridge.com/projects/au.../jquery/#intro

Gracias de antemano por tu ayuda

mayid · #37 (**permalink**) 25/11/2009, 21:32

Tanto los scripts de lado cliente como los de lado servidor pueden generar html. Te recomiendo que leas algo acerca de que es el DOM para entender mejor esto.

Lo que preguntas: donde va esto? Se responde con : "en ningun lugar".

Cita:

<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>

Todo esto es solo un ejemplo de lo que autocompleter genera consultado a mysql. Es decir, es un contenido dinamico. Por favor asegurate de visualizar que es el contenido dinamico, y que es modificar dinamicamente el DOM (con javascript).

No vendria nada mal que leas acerca de que son las variables en la programacion. Porque lo que estamos haciendo con PHP es generar un juego de variables, que sirven finalmente para que javascript genere las etiquetas html por las que preguntas. Dinamicamente.

Javascript va a consultar, por medio de PHP, a la base de datos, y va a recibir una respuesta inmediatamente. Todo gracias al ajax...

En fin, cada vez que pulses una tecla en tu buscador, ajax / javascript va a buscar palabras en mysql para sugerir... Eso es autocompletar.

ambigus · #38 (**permalink**) 26/11/2009, 08:24

Hola Mayid. ¿Podrías sugerirme algunos tutoriales y/o lecturas respecto de toda esta temática?, Porfavor

. Ahora bien, aún me has respondido:

¿Dónde y/o cómo se envuelve este código?:

Código:

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

¿Podrías pasarte por aquí?: http://www.forosdelweb.com/f21/mysql...pletar-756002/

Espero una pronta respuesta.

.

mayid · #39 (**permalink**) 27/11/2009, 16:55

Quizas sea buena idea que leas algo de javascript, porque jquery se construye sobre javascript, para facilitar las cosas, pero funcionando, en el fondo, igual:
http://www.desarrolloweb.com/articulos/508.php

Y Maestros del Web tiene un tuto sobre DOM y documentos (x)html bien construidos:
http://www.maestrosdelweb.com/editorial/dom/

Vos tenes dos archivos.
-el principal
- el script PHP

Esto va en el principal, en el header, dentro de etiquetas de script, y mencionando como target al archivo php:

Cita:

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

Todo el header queda mas o menos asi:

Cita:

<!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í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>

<script type="text/javascript">
$(document).ready(function(){

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

})

</script>
</head>

mayid · #40 (**permalink**) 27/11/2009, 17:03

El segundo archivo, el del script PHP, es el encargado de generar contenido dinamico. Esto quiere decir que cada vez que tu escribas algo en el buscador, PHP generara una respuesta de autocompletado.

PHP devuelve cosas asi:

Cita:

{
respuesta : contenido,
sugerencias [tal, talotra, quizasestaotra, yestatambien,etc]
}

Y jquery con esa respuesta, y dinamicamente, modifica estas etiquetas:

Cita:

<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>

... que en un principio estan vacias. Si escribimos palabras que comienzas con "pa", PHP devuelve un array con palabras que comienzan con PA y javascript las vuelca en pantalla.

Para probar el script vamos a generar una respuesta falta de PHP, tal como te la dan en la pagina principal del autocompleter. Y vamos a escribir "Li" en el buscador a ver si aparecen esas palabras que tenemos en nuestro listado (que es "falso" porque no es "dinamico" sino estatico, es decir generados por nosotros y no por la inteligencia artificial).

Me pongo con esto en mi maquina y te paso los archivos, ok? Estate contento.

mayid · #41 (**permalink**) 27/11/2009, 18:18

Lo tengo funcionando con una respuesta falsa de PHP. Este es el archivo principal.html

Cita:

<!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" lang="sp" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="es" />
<link href="styles.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>

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

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

En el archivo script.php tendrias esto:

Cita:

<?php
echo "{
query:'Li',
suggestions:['<a href='#'>Liberia'</a>,'Libyan Arab Jamahiriya','Liechtenstein','Lithuania']
}";
?>

Podes probarlo con la silaba "Li" , pero por ahora solo funciona si la L es mayuscula.

mayid · #42 (**permalink**) 27/11/2009, 19:00

Y aqui tenes el script funcionando, con links y todo:

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

}

 
?>

Lo que le falta es que selecciona tamto mayusculas como minusculas... y creo que agregando una variable, y esto a la consulta mysql estaria ok:

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

ambigus · #43 (**permalink**) 28/11/2009, 16:28

Hola Mayid. Mira lo poco o nada que he avanzado porfavor:

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

Nose porqué no me funciona

Espero una pronta respuesta.....

mayid · #44 (**permalink**) 29/11/2009, 10:00

Yo creo que el problema es que usaste una ruta absoluta:

Cita:

options = { serviceUrl:'http://extremegamex.gofreeserve.com/script.php'};

No creo que eso sea posible. Tenes que usar rutas locales:

Cita:

options = { serviceUrl:'script.php'};

Si tu script.php esta en el mismo directorio que tu pagina principal, entonces sencillamente no uses rutas, que con solo escribir el nombre del archivo php ya se lo puede encontrar.

ambigus · #45 (**permalink**) 01/12/2009, 16:20

Vale, aún sigue sin funcionar

. Pero ya he corregido lo que me has comentado y aún y así nada.

.

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

Espero una pronta respuesta.

mayid · #46 (**permalink**) 05/12/2009, 10:35

SUgiero que te olvides completamente de los paths absolutos:

Cita:

No se por que no anda. A mi me andaba. Dejame que lo pruebe y te cuento.

mayid · #47 (**permalink**) 05/12/2009, 11:01

Che, me esta funcionando ok.

Esto es lo que tengo y anda bien:

Cita:

<!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" lang="sp" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="es" />
<link href="styles.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.autocomplete-min.js"></script>

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

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