hacer consulta al escribir en un input

nfo · #1 (**permalink**) 27/10/2008, 06:56

No se si se puede hacer. Estoy haciendo un buscador de usuarios con sus cajitas de nombre apellido etc...Siempre lo he echo rellenando los input y dandole al botón de enviar para que realice la consulta en la base de datos.
Ahora lo que quiero es cambiar todo eso quitar el boton y hacerlo de tal manera que al escribir el nombre realice la consulta. sabeis como se puede hacer?

matak · #2 (**permalink**) 27/10/2008, 08:39

lo que quieres hacer se puede, con el evento onkeypress y haciendo una pertición por medio de ajax al servidor. Pero ten en cuenta que realizará una consulta por cada tecla que rellenes en el formulario. No se si me explico

si introduces "maria" hará 5 consultas 1ª por "m", 2ª por "ma", 3ª por "mar",..,5ª por "maria".

el codigo sería algo asi:
BD:prueba
TABLA: usuarios
-nombre
-apellido
index.php

Código javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function objetoAjax(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
    }
    }
 
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
 
function detectkey(evt,obj) {
keycode = (evt.keyCode==0) ? evt.which : evt.keyCode;
if (keycode!=8) {
    cadena=obj.value + String.fromCharCode(keycode);
    pagina='filtra.php?cadena='+cadena;
}else {
    obj.value="";
    pagina='filtra.php';
}
    divcontenido = document.getElementById('tabla_usuarios');
    ajax=objetoAjax();
    ajax.open("POST", pagina, true);
    ajax.onreadystatechange=function() {
      if (ajax.readyState==4) {
        divcontenido.innerHTML = ajax.responseText
      }
    }
    ajax.send(null);
}
</script>
</head>
<body>
 
<input type="text" name="nom" id="nom" value="" size="30" maxlength="30" onkeypress="detectkey(event,this)">
<br />
<div id="tabla_usuarios"></div>
</body>
</html>

filtra.php

Código php:

Ver original<?PHP
if (isset($_REQUEST['cadena'])) {
   $_REQUEST['cadena'];
   $query="SELECT nombre,apellido FROM usuarios WHERE (nombre like 'cadena%')";
}else $query="SELECT nombre,apellido FROM usuarios";
 
      $conexion = mysql_connect ($host, $usser, $pass)
         or die ("No se puede conectar con el servidor");
 
      mysql_select_db ("prueba")
         or die ("No se puede seleccionar la base de datos");
      
      $consulta=mysql_query($query,$conexion);
?>
<TABLE>
<TBODY>
<TR>
<TH>Nombre</TH>
<TH>Apellido</TH>
</TR>
<?PHP
      while($row = mysql_fetch_array($consulta)) {
          echo "<TR>";
          echo "<TD>".$row['nombre']."</TD>";
          echo "<TD>".$row['apellido']."</TD>";
          echo "</TR>";
      }
?>
</TBODY>
</TABLE>

Pruebalo y me dices que lo he escrito pero no lo he ejecutado

Saludos

nfo · #3 (**permalink**) 27/10/2008, 08:53

sisisisi perfecto!! esto es lo que andaba buscando, fuciona de maravilla el codigo, muchisimas gracias matak

Aproposito dices:

"Pero ten en cuenta que realizará una consulta por cada tecla que rellenes en el formulario"

lo dices por algo en especial?, petara el servidor ? este buscador solo es para buscar los usuarios pero solo los admin podrán hacer uso de el..

Gracias tio.

matak · #4 (**permalink**) 27/10/2008, 09:27

Simplemente para que lo supieras...

El servidor no creo que pete pero segun los usuarios que tengas etc, pues podria tardar un poco más y no se veria el efecto inmediato, ya que no es lo mismo buscar entre 1.000 que entre 10.000.000. Lo que supone para "maria" 5 consultas contra 10.000.000 registros cuando realmente solo se quiere hacer 1

saludos

Si os ha gustado aplaudan

y gracias por escuchar.

Aver si eres tu kienme inaugurasel karma,jejej

nfo · #5 (**permalink**) 27/10/2008, 09:58

ajam.... entonces que me recomiendas para largo plazo ?, ponerlo con un botón mejor ?

:apla uso:

matak · #6 (**permalink**) 27/10/2008, 11:48

La verdad es que asi queda bastante jefe,no??

Yo de ti lo dejaba asi de momento...

Si algun día tienes problemas cambia la funcion deteckey() por esta otra

Código javascript:

Ver originalfunction detectkey(evt,obj) {
keycode = (evt.keyCode==0) ? evt.which : evt.keyCode;
if (keycode!=8) {
  if (keycode==13) {
    cadena=obj.value;
    pagina='filtra.php?cadena='+cadena;
    divcontenido = document.getElementById('tabla_usuarios');
    ajax=objetoAjax();
    ajax.open("POST", pagina, true);
    ajax.onreadystatechange=function() {
      if (ajax.readyState==4) {
        divcontenido.innerHTML = ajax.responseText
      }
    }
    ajax.send(null);
  }
}else {
    obj.value="";
    pagina='filtra.php';
    divcontenido = document.getElementById('tabla_usuarios');
    ajax=objetoAjax();
    ajax.open("POST", pagina, true);
    ajax.onreadystatechange=function() {
      if (ajax.readyState==4) {
        divcontenido.innerHTML = ajax.responseText
      }
    }
    ajax.send(null);
}
}

En este caso te dejaría insertar caracteres hasta que pulsaras ENTER. Entonces realizaría la consulta

nfo · #7 (**permalink**) 27/10/2008, 13:21

Es una alternativa más ...me gusta....Lo que voy hacer es dejar esto para los nombres como busqueda rapida. y para apellidos, telefono y demás poner un botón que ya son más caracteres.

que te parece mi opción?

Esta genial esta función ehhh como mola!.