Ajax buscar por nombre

fedefrankk · #1 (**permalink**) 10/07/2014, 17:36

Buenas a todos, tengo un codigo que busca por letras, anda muy bien, el tema es el siguiente, al entrar a la web, la pagina busca las imagenes por puntos, ahora si yo quiero buscar una especifica por nombre no puedo, no se hacerlo... he buscado por google y encuentro muchos de Jquery, andan buen pero no entiendo nada y realmente quiero entender..
al entrar a la web si busca por puntos y hice una captura de pantalla:

al querer buscar por nombre desaparece todo y muestra lo siguiente:

el tema es que lo que busca lo ordene en los div.....

dejo codigo:

Código PHP:

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>Documento sin título</title>
<link href="gale.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
        function sugerencias(str){
            var xmlhttp;
            if (str.length==0)
              { 
              document.getElementById("txtHint").innerHTML="";
              return;
              }
              if (window.XMLHttpRequest)
              {
              xmlhttp=new XMLHttpRequest();
              }
            else
              {
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
          xmlhttp.onreadystatechange=function()
              {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
                 {
                 document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                 }
              }
          xmlhttp.open("GET","sugerencias.php?q="+str,true);
            xmlhttp.send();
        }
    </script>
</head>
 
<body>
    <h2>Sugerencias</h2>
        <p>Introduce un nombre en la siguiente casilla</p>
        <form action="">
            Primer nombre: <input type="text" id="txt1" onKeyUp="sugerencias(this.value)">
        </form>
    <div class="galeria" id="txtHint">
    
    
    <!--
/**************************************************************/-->
<?php
include("conectar.php");
$cone=conectar(); 
 
 
$registros=mysqli_query($cone,"select * from img ORDER BY usu_puntos DESC") or
  die("Problemas en el select:".mysqli_error());
while ($reg=mysqli_fetch_array($registros)){
 
?>
 
 
<div class="contenedor_c" id="capa1"><input type="image"  src="../_imgclient/<? print $reg['nombre'].".".$reg['nombre'] ?>" width=292 height=211 title="<? print $reg['nombre']?>"></div>
 
<?php } ?>
 
 
 
        
    </body>
</html>

desde ya muchas Gracias a todos, espero que no me manden a googlear,
saludos
y se agradece el tiempo de los que saben..
fede

manuparquegiralda · #2 (**permalink**) 11/07/2014, 12:45

A ver si me sale bien la explicación porque soy un poco malo para explicar y al no poner los nombres de tus archivos no sé muy bien como lo has hecho, un poco más de información sería útil. ;)

El problema está en el archivo sugerencias.php del cual no has puesto el código. Pero seguramente en ese archivo haces la consulta únicamente y devuelves los nombres a pelo ¿no?

Si te fijas en tu script: (document.getElementById("txtHint").innerHTML=xmlht tp.responseText;) estás introduciendo la respuesta AJAX en la división txtHint, pero esa respuesta debería venir también con el código HTML que va dentro de la citada "txtHint" ya que la respuesta AJAX está sustituyendo por completo lo que hay dentro de la división.

No sé muy bien como tienes configurado tu archivo sugerencias.php pero en el deberías tener algo así:

Código PHP:

Ver original<?php
 
$innerHTML = "";
 
//Inclusión de la conexión
include("conectar.php");
$cone=conectar(); 
 
//Pregunta concreta por nombre a la base de datos (Esto es un ejemplo ya que no sé como está estructurada)
$registros=mysqli_query($cone,"select * from img WHERE nombre LIKE '%".$_GET['q']."%' ORDER BY usu_puntos DESC") or die("Problemas en el select:".mysqli_error());
 
//Sacamos los registros con las divs
while ($reg=mysqli_fetch_array($registros)){
 
     $innerHTML .= '<div class="contenedor_c" id="capa1"><input type="image"  src="../_imgclient/'.$reg['nombre'].'.'.$reg['nombre'].'" width=292 height=211 title="'.$reg['nombre'].'"></div>
     ';
 
}
 
echo $innerHTML;
?>

EL caso es que el xmlhttp.responseText de la función javascript te devolverá la variable $innerHTML del archivo "sugerencias.php" y serán las divisiones que haya creado el bucle con los resultados de búsqueda. Además en la función puedes hacer que si no hay resultado no cambie el HTML, por ejemlo:

Código Javascript:

Ver original<script type="text/javascript">
     function sugerencias(str){
          var xmlhttp;
          if (str.length==0) { 
               document.getElementById("txtHint").innerHTML="";
               return;
          }
          if (window.XMLHttpRequest) {
               xmlhttp=new XMLHttpRequest();
          } else {
               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange=function() {
               if ((xmlhttp.readyState==4) && (xmlhttp.status==200)&&(xmlhttp.responseText)) {
                    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
               }
          }
          xmlhttp.open("GET","sugerencias.php?q="+str,true);
          xmlhttp.send();
     }
</script>

Esto es lo que he podido hacer con la información que has puesto en el POST, si me he desviado un poco, pon un poco más de información e intentaré ayudarte.

fedefrankk · #3 (**permalink**) 11/07/2014, 17:15

Hola, si es eso, muy buena tu explicacion, lo que deseo es que al entrar a la web tenga la galeria de fotos por puntos y cuando ingreso un nombre que me aparezca,
yo hice esto:

en sugerencias.php

Código PHP:

Ver original<link href="gale.css" rel="stylesheet" type="text/css" />
<?php
include("conectar.php");
$cone=conectar(); 
$q=$_GET["q"];
 
?>
<div class="galeria" id="txtHint">
 
<?php
 
$registros=mysqli_query($cone,"select * from img where nombre  LIKE '$q%'") or
  die("Problemas en el select:".mysqli_error());
while ($reg=mysqli_fetch_array($registros)){
 
?>
 
<div class="galeria">
<div class="contenedor_c" id="capa1"><?php echo $reg['nombre']."<BR>PUNTON=".$reg['usu_puntos'] ?></div>
</div>
<?php
}
 
?>

y en el index.php
hice esto

Código PHP:

Ver original<title>Documento sin título</title>
<link href="gale.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript">
 
        function sugerencias(str){
            var xmlhttp;
            if (str.length==0)
              { 
              document.getElementById("txtHint").innerHTML="";
              return;
              }
              if (window.XMLHttpRequest)
              {
              xmlhttp=new XMLHttpRequest();
              }
            else
              {
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
          xmlhttp.onreadystatechange=function()
              {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
                 {
                 document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                 }
              }
            xmlhttp.open("GET","sugerencias.php?q="+str,true);
            xmlhttp.send();
        }
         
    </script>
<body>
    <h2>Sugerencias</h2>
        <p>Introduce un nombre en la siguiente casilla</p>
        <form action="">
            Primer nombre: <input type="text" id="txt1"  onKeyUp="sugerencias(this.value)">
        </form>
    <div class="galeria" id="txtHint">
    <?php 
    include("conectar.php");
$cone=conectar(); 
    
    $registros=mysqli_query($cone,"select * from img ORDER BY usu_puntos DESC") or
  die("Problemas en el select:".mysqli_error());
while ($reg=mysqli_fetch_array($registros)){
?>
<div class="galeria">
<div class="contenedor_c" id="capa1"><?php echo $reg['nombre']."<BR>PUNTON=".$reg['usu_puntos'] ?></div>
</div>
 
<?php } ?>
 
    
    
    </div>

La verdad que anda, no se si esta bien, ó mal, al no saber mucho sobre el tema no puedo decir si es correcto el codigo, o em mucho no lo se..

Muchisimas gracias por tu tiempo
se agradece .
saludos
fede

fedefrankk · #4 (**permalink**) 14/07/2014, 16:49

Hola, d nuevo, disculpa la molestia de volver a preguntar,

reice el codigo como vos me digiste, anda de 10, el tema que al principiio no busca por puntos, si o si tengo que hacer andar el ajax, y solamente anda cuando busca por letras...

dejo codigo

index.html

Código Javascript:

Ver original<script type="text/javascript">
 
     function sugerencias(str){
          var xmlhttp;
          if (str.length==0) { 
               document.getElementById("txtHint").innerHTML="";
               return;
          }
          if (window.XMLHttpRequest) {
               xmlhttp=new XMLHttpRequest();
          } else {
               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange=function() {
               if ((xmlhttp.readyState==4) && (xmlhttp.status==200)&&(xmlhttp.responseText)) {
                    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
               }
          }
          xmlhttp.open("GET","sugerencias.php?q="+str,true);
          xmlhttp.send();
     }
 
         
    </script>
<body>
    <h2>Sugerencias</h2>
        <p>Introduce un nombre en la siguiente casilla</p>
        <form action="">
            Primer nombre: <input type="text" id="txt1"  onKeyUp="sugerencias(this.value)">
        </form>
    <div class="galeria" id="txtHint"></div>

sugerencias.php

Código PHP:

Ver original<?php
 include("conectar.php");
$cone=conectar(); 
$innerHTML = "";
 if($innerHTML=""){
//Inclusión de la conexión
include("conectar.php");
$cone=conectar(); 
 
//Pregunta concreta por nombre a la base de datos (Esto es un ejemplo ya que no sé como está estructurada)
$registros=mysqli_query($cone,"select * from img WHERE nombre LIKE '%".$_GET['q']."%' ORDER BY usu_puntos DESC") or die("Problemas en el select:".mysqli_error());
 
//Sacamos los registros con las divs
while ($reg=mysqli_fetch_array($registros)){
 
     $innerHTML .= '<div class="contenedor_c" id="capa1"><input type="image"  src="../_imgclient/'.$reg['nombre'].'.'.$reg['nombre'].'" width=292 height=211 title="'.$reg['nombre'].'"></div>
     ';
 
}
 
echo $innerHTML;
 
 }else{
    $registros=mysqli_query($cone,"select * from img ORDER BY usu_puntos DESC") or
  die("Problemas en el select:".mysqli_error());
while ($reg=mysqli_fetch_array($registros)){
 
 $innerHTML .= '<div class="contenedor_c" id="capa1"><input type="image"  src="../_imgclient/'.$reg['nombre'].'.'.$reg['nombre'].'" width=292 height=211 title="'.$reg['nombre'].'"></div>';
 
echo $innerHTML;
} }
 
 ?>

Desde ya muchas gracias
saludos a todos
fede