Foros del Web » Creando para Internet » Diseño web »

Buscador perfecto

Estas en el tema de Buscador perfecto en el foro de Diseño web en Foros del Web. 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 ...

  #31 (permalink)  
Antiguo 24/11/2009, 19:03
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Buscador perfecto

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.
  #32 (permalink)  
Antiguo 24/11/2009, 19:11
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: Buscador perfecto

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 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.
  #33 (permalink)  
Antiguo 24/11/2009, 19:12
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Buscador perfecto

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.

  #34 (permalink)  
Antiguo 25/11/2009, 08:26
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: Buscador perfecto

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...
  #35 (permalink)  
Antiguo 25/11/2009, 09:00
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Buscador perfecto

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

  #36 (permalink)  
Antiguo 25/11/2009, 21:18
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: Buscador perfecto

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
  #37 (permalink)  
Antiguo 25/11/2009, 21:32
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Buscador perfecto

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.
  #38 (permalink)  
Antiguo 26/11/2009, 08:24
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: Buscador perfecto

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. .
  #39 (permalink)  
Antiguo 27/11/2009, 16:55
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Buscador perfecto

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

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

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

})

</script>
</head>

Última edición por mayid; 27/11/2009 a las 17:05
  #40 (permalink)  
Antiguo 27/11/2009, 17:03
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Buscador perfecto

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.
  #41 (permalink)  
Antiguo 27/11/2009, 18:18
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Buscador perfecto

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.
  #42 (permalink)  
Antiguo 27/11/2009, 19:00
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Buscador perfecto

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 ($array0strlen($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%'");

Última edición por mayid; 28/11/2009 a las 11:41
  #43 (permalink)  
Antiguo 28/11/2009, 16:28
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: Buscador perfecto

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.....
  #44 (permalink)  
Antiguo 29/11/2009, 10:00
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Buscador perfecto

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.
  #45 (permalink)  
Antiguo 01/12/2009, 16:20
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: Buscador perfecto

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.
  #46 (permalink)  
Antiguo 05/12/2009, 10:35
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Buscador perfecto

SUgiero que te olvides completamente de los paths absolutos:

Cita:
<link href="http://extremegamex.gofreeserve.com/styles.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://extremegamex.gofreeserve.com/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://extremegamex.gofreeserve.com/jquery.autocomplete.js"></script>
No se por que no anda. A mi me andaba. Dejame que lo pruebe y te cuento.

Última edición por mayid; 05/12/2009 a las 10:43
  #47 (permalink)  
Antiguo 05/12/2009, 11:01
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Buscador perfecto

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>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:37.