Foros del Web » Programando para Internet » Javascript » Frameworks JS »

XAJAX -> Duda en evento "onkeyup" con campo vacío

Estas en el tema de XAJAX -> Duda en evento "onkeyup" con campo vacío en el foro de Frameworks JS en Foros del Web. Buenos días a tod@s: Les comento una duda para ver si me pueden echar un cable y de paso, les copio el código funcional al ...
  #1 (permalink)  
Antiguo 28/05/2010, 02:28
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 17 años
Puntos: 2
Pregunta XAJAX -> Duda en evento "onkeyup" con campo vacío

Buenos días a tod@s:

Les comento una duda para ver si me pueden echar un cable y de paso, les copio el código funcional al 90% por si le sirve a alguien (por cierto, le dejo las trazas comentadas :-p ).

El tema es que he hecho una búsqueda con 'auto completar' utilizando XAJAX. He creado la función y la he puesto en el evento 'onkeyup' y según va encontrando resultados, muestra una capa oculta y crea una lista con los datos obtenidos.

Hasta aquí todo funciona OK, el problema lo tengo cuando se queda el campo de búsqueda vacío, que no consigo que me vuelva a ocultar la capa. Es decir, si empiezo a escribir , corrijo y se queda en blanco, la idea es que si borro hasta que se quede limpio el campo de texto, se vuelva a ocultar de nuevo la capa, pero lo hace justo al revés, si el campo está vacío, pierde el filtro y muestra todos los resultados.

Pues nada, espero que me puedan echar una mano y espero que le sirva a alguien el código, porque he visto varios temas consultando cómo hacer algo así y que con unas ideas y otras, me han orientado para montar este sistema.

Una última pregunta, para evitar el SQL-Injection, no sé si sería recomendable hacerle algo más, aunque está en una zona 'privada', que no debería ser accesible a nadie, aunque nunca se sabe.

Muchas gracias y un saludo.


Código HTML:
<input type="text" name="busc_alumno" id="busc_alumno" value="Escribe el nombre ..." onkeyup="xajax_buscarAlumno(this.value)" />
<div id="alumnoResult" class="oculto">
<!-- carga resultado de búsuqeda -->
</div> 
Código PHP:
function buscarAlumno($inputText) {
    
// se instancia el objeto para recibir la respuesta
    
$respuesta = new xajaxResponse();
    
    if((
trim($inputText) == "") || (trim($inputText) == "Escribe el nombre ...") || (strlen(trim($inputText)) < )) {
        
$respuesta->assign("alumnoResult","style.display","none");
        
$listadoAlumnos "";
        
    }else{
        
        
$mysql = new MySQL('localhost','root','','lt_diplomas');
        
$sql "select * from diploma_pdf where alumno_nombre like '%".trim($inputText)."%' order by alumno_nombre";
        
$consulta $mysql->consulta($sql);    
        
$total $mysql->num_rows($consulta);
        
//      $respuesta -> alert($total);       
//      $respuesta -> alert($sql);
           
        
if ($total 0) {
//            echo "<br>";            
//            $respuesta -> alert('entramos');
                  
            
$listadoAlumnos "<ul id='listadoAlumnos'>";        
            
            while(
$resultados $mysql->fetch_array($consulta)) {
                
$listadoAlumnos .= "<li><a href='#' onclick='xajax_selectAlumno(\"".$resultados['idDiploma']."\",\"".utf8_decode($resultados['alumno_nombre'])."\")'>".utf8_decode($resultados['alumno_nombre'])."</li>";
            }          
            
            
$listadoAlumnos .= "</ul>";                        
            
        }else{       
            
$listadoAlumnos "No hay coincidencias encontradas.";
//            $respuesta -> alert('na\' que hacer');
            
        
}
//        
            
$respuesta -> assign("alumnoResult","style.display","block");            
//            $respuesta -> alert('llegamos aquí');
            
$respuesta -> assign("alumnoResult","innerHTML",$listadoAlumnos);
            
            return 
$respuesta;
    }    

Pongo el código en jQuery para limpiar y restaurar el texto por defecto en caso de dejar en blanco.

Código:
    // Borra contenido por defecto del campo de búsqueda de alumnos en form alta diploma

        $("#busc_alumno").click(function(){
            var busqueda = $("#busc_alumno").val();
            if (busqueda == "" || busqueda == "Escribe el nombre ...") {
                $("#busc_alumno").val("");                
                event.preventDefault();
            }
            
        });
        
        $("#busc_alumno").blur(function(){
            var busqueda = $.trim($("#busc_alumno").val());
            if (busqueda == "" || busqueda == "Escribe el nombre ...") {
                $("#busc_alumno").val("Escribe el nombre ...");
                //alert("1" + busqueda + "1");                
                event.preventDefault();
            }                    
        });
  #2 (permalink)  
Antiguo 31/05/2010, 10:03
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 17 años
Puntos: 2
Respuesta: XAJAX -> Duda en evento "onkeyup" con campo vacío

Buenas de nuevo, ¿a alguien se le ocurre algo? ¿os sirve al menos el código?

Saludos
  #3 (permalink)  
Antiguo 02/06/2010, 12:20
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 17 años
Puntos: 2
Respuesta: XAJAX -> Duda en evento "onkeyup" con campo vacío

¿alguna sugerencia?
  #4 (permalink)  
Antiguo 02/06/2010, 16:34
 
Fecha de Ingreso: mayo-2009
Mensajes: 4
Antigüedad: 15 años, 6 meses
Puntos: 1
Respuesta: XAJAX -> Duda en evento "onkeyup" con campo vacío

Buenas tardes jesusjj . . .

Mi sugerencia seria que ocuparas el "Autocomplete" de JQuery, es facil y rapido, no necesitarias ocuparte del div donde se mostraran las sugerencias. Con el "Autocomplete" le indicas apartir de cuantos caracteres realiza la busqueda.
  #5 (permalink)  
Antiguo 02/06/2010, 18:47
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 17 años
Puntos: 2
Respuesta: XAJAX -> Duda en evento "onkeyup" con campo vacío

Hola, muchas gracias Me había planteado utilizar un plugin, pero entonces siempre me quedaría la duda de cómo se hace esto o porqué no funciona como pienso que debería hacerlo.

Si al final desisto, lo utilizaré

Muchas gracias y buenas noches.
  #6 (permalink)  
Antiguo 10/06/2010, 03:48
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 17 años
Puntos: 2
Respuesta: XAJAX -> Duda en evento "onkeyup" con campo vacío

Buenas, para quien le pueda interesar, ya está era la estructura del if, mostraba la capa siempre fuera, así que me modificaba cualquier código que intentase ocultar la capa.

Código PHP:
Ver original
  1. function buscarAlumno($inputText) {
  2.     // se instancia el objeto para recibir la respuesta
  3.     $respuesta = new xajaxResponse();
  4.  
  5.     $cuantos = strlen($inputText);
  6.    
  7.     if(isset($inputText) && $inputText != "Escribe el nombre ...") {
  8.              
  9.         $mysql = new MySQL('localhost','root','','lt_diplomas');
  10.         // $mysql = new MySQL(DB_SERVIDOR, DB_USUARIO, DB_CLAVE, DB_BBDD);
  11.         $sql = "select * from diploma_pdf where alumno_nombre like '%".trim($inputText)."%' order by alumno_nombre";
  12.         $consulta = $mysql->consulta($sql);    
  13.         $total = $mysql->num_rows($consulta);
  14.        
  15. //      $respuesta -> alert($total);      
  16. //      $respuesta -> alert($sql);
  17.        
  18.         if($cuantos == 0) {
  19. //            $respuesta->alert("a ver");
  20.             $respuesta->assign("alumnoResult","style.display","none");
  21.             $listadoAlumnos = "";
  22.             //$mysql->close();
  23.         }else{          
  24.             if ($total > 0) {
  25.     //            echo "<br>";            
  26.     //            $respuesta -> alert('entramos');
  27.                      
  28.                 $listadoAlumnos = "<ul id='listadoAlumnos'>";        
  29.                
  30.                 while($resultados = $mysql->fetch_array($consulta)) {
  31.                     $listadoAlumnos .= "<li><a href='#' onclick='xajax_selectAlumno(\"".$resultados['idDiploma']."\",\"".utf8_encode($resultados['alumno_nombre'])."\")'>".utf8_decode($resultados['alumno_nombre'])."</li>";
  32.                 }          
  33.                
  34.                 $listadoAlumnos .= "</ul>";                        
  35.                
  36.             }else{      
  37.                 $listadoAlumnos = "No hay coincidencias encontradas.";
  38.                 //$respuesta -> alert('na\' que hacer');
  39.                
  40.             }
  41.             $respuesta -> assign("alumnoResult","style.display","block");            
  42. //            $respuesta -> alert('llegamos aquí');
  43.             $respuesta -> assign("alumnoResult","innerHTML",$listadoAlumnos);
  44.         }
  45.        
  46.            
  47.             return $respuesta;
  48.            
  49.     }    
  50. }

Para quien le interese, pienso que son menos líneas de código que el utilizar cualquier autocomplete con jQuery. Pero para gustos, los colores :-p

Saludos.

Etiquetas: autosuggest, php-xajax, xajax, busquedas, autocompletado
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 22:17.