Search Live, que me pueda "jalar" 3 campos de una tabla en un textbox

gokufast · #1 (**permalink**) 03/04/2009, 16:36

holas.

tengo la siguiente duda, y ando buscando en internet pero no me convence ningun live search que vi.

lo que necesito es que al ir poniendo en un textbox por ejemplo en numero de socio se vayan filtrando los resultados pero estos resultados que muestre que se los "jale" de una tabla de mi BD, y poder elegir de esos el que quiero y que se llenen los otros textox con los datos del socio.

tengo 4 campos en mi tabla que son
Num_socio, ap_materno, Ap_paterno, Nombres

y que al ir poniendo el num_socio vayan saliendo los resultados y poder elegir uno por ejemplo 3698 y al elegirno en los otros textbos salga los datos del socio como ap_materno, Ap_paterno, Nombres.

espero que puedan guiarme un poco con esto, y que me hayan podido entender

saludos

echevemaster · #2 (**permalink**) 04/04/2009, 03:15

La busqueda 'live' de un campo es fácil si la estructuras de forma correcta, intentare ayudarte:

1. Entre las etiquetas <head></head> de tu página llama a la funcion js en el cual vas a hacer la llamada ajax.

Código HTML:

<script type="text/javascript" src="manejador_ajax.js">

2. En el archivo manejador manejador_ajax.js puedes escribir esto:

Código:

function nuevoAjax()
{ 
    /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
    lo que se puede copiar tal como esta aqui */
    var xmlhttp=false;
    try
    {
        // Creacion del objeto AJAX para navegadores no IE
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
        try
        {
            // Creacion del objet AJAX para IE
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(E)
        {
            if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
        }
    }
    return xmlhttp; 
}

3. Luego haces otra llamada a un script js:

Código HTML:

<script type="text/javascript" src="live_search.js">

que contendra esto:

Código:

window.onload = function()
{
num_socio  = document.getElementById('num_socio');

        num_socio.onchange = function()
        {
            //Este es el div que vas a poner en tu pagina
            var msg_sistema = document.getElementById('msg_sistema');
            //
            num_socio = document.forms[0].num_socio.value;
            ajax = nuevoAjax();
            // archivo con la logica de la base de datos
            url = "buscar_socio.php";
            ajax.open("POST",url,true);
            ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            ajax.onreadystatechange = function()
            {
            if(ajax.readyState == 1)
            { 
            // Buscate una imagen para crear el prealoder, puedes conseguirla en ajaxload.info        
              msg_sistema.innerHTML = "<img src=\"../imagenes/ajax-loader.gif\" / alt=\"Cargando...\">";
            }

            if(ajax.readyState == 4)
            {
            msg_sistema.innerHTML = ajax.responseText
            }
            }
            ajax.send(
            "num_socio="+num_socio);
        }

4. Primero creas el input de tipo texto

Código HTML:

<input type="text" name=''num_socio" id="num_socio">

5. Creas el div donde pondras la respuesta

Código HTML:

<div id="msg_sistema"></div>

6. Creas tu archivo buscar_socio.php que contendra la llamada a la base de datos y en la cadena SQL de consulta

Código:

SELECT Num_socio, ap_materno, Ap_paterno, Nombres
FROM SOCIOS WHERE Num_socio='num_socio'

7. Solo te quedaria presentar los resultados de las consultas con las ordenes del lenguaje de scripting (en este caso php) que utilices correspondientes

gokufast · #3 (**permalink**) 06/04/2009, 13:27

en el archivo buscar_socio.php pongo algo como esto?

Código PHP:

  <?php 
$connect = mysql_connect("localhost","root","XxX"); 
mysql_select_db("ajax") or die(mysql_error()); 
 
 
$result=mysql_query(" 
SELECT  
   soc_cod,  
   soc_app, 
   soc_apm, 
   soc_nomb 
FROM 
  socios 
WHERE 
  vol_cod = $cod 
  AND vol_fecha >= '2007/".$_GET['select']."/01'     
GROUP BY 
  codigo",$link); 
  $result0=mysql_query("SELECT soc_cod, soc_app, soc_apm, soc_nomb, soc_ci  
                          FROM socios WHERE soc_cod = '$_GET[codigo]'",$link); 
    
    while($row0=mysql_fetch_array($result0)) 
    { 
    echo "<br><br><center>Nota: La siguiente consulta no es un documento legal, por lo tanto no sirve para realizar ning&uacute;n reclamo</center>"; 
    printf("<center><h1>&nbsp;&nbsp;%s &nbsp;&nbsp;%s &nbsp;&nbsp;%s <br>&nbsp;%s </h1></center>", 
    $row0["soc_app"],$row0["soc_apm"],$row0["soc_nomb"],$row0["soc_ci"]); 
     
    } 
?>

echevemaster · #4 (**permalink**) 06/04/2009, 14:22

Si pero ....

Código PHP:

  $_GET[codigo]

debe ser el parametro que le mandas como id desde la petición ajax

Saludos

gokufast · #5 (**permalink**) 06/04/2009, 14:48

bueno asi mas menos lo hice pero no corre que es lo que esta mal? esque soy un beginner en esto de ajax.

01.php (mi pagina donde esta el texbox)

Código PHP:

  <!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>Buscador Ajax</title>
<script type="text/javascript" src="manejador_ajax.js"></script>
<script type="text/javascript" src="live_search.js"></script>
</head>
<body>
<form name="form">
    <input type="text" name="soc_cod" id="soc_cod">
</form>
<div id="msg_sistema"></div>
</body>
</html>

y mi pagina buscar_socio.php (con los valores reales de la tabla de mi base de datos)

Código PHP:

  <?php
$connect = mysql_connect("localhost","root","CoopSA");
mysql_select_db("ufv") or die(mysql_error());

$result0=mysql_query("SELECT soc_cod, soc_app, soc_apm, soc_nomb 
                          FROM socios WHERE soc_cod = '$_GET[soc_cod]'",$connect);
    while($row0=mysql_fetch_array($result0))
    {
    printf("<center><h1>&nbsp;&nbsp;%s &nbsp;&nbsp;%s &nbsp;&nbsp;%s <br>&nbsp;%s </h1></center>",
    $row0["soc_app"],$row0["soc_apm"],$row0["soc_nomb"],$row0["soc_ci"]);
    
    }
?>

y bueno las anteriores
manejador_ajax.js

Código PHP:

  // JavaScript Document
function nuevoAjax()
{ 
    /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
    lo que se puede copiar tal como esta aqui */
    var xmlhttp=false;
    try
    {
        // Creacion del objeto AJAX para navegadores no IE
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
        try
        {
            // Creacion del objet AJAX para IE
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(E)
        {
            if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
        }
    }
    return xmlhttp; 
}

live_search.js

Código PHP:

  window.onload = function()
{
soc_cod  = document.getElementById('soc_cod');

        soc_cod.onchange = function()
        {
            //Este es el div que vas a poner en tu pagina
            var msg_sistema = document.getElementById('msg_sistema');
            //
            soc_cod = document.forms[0].soc_cod.value;
            ajax = nuevoAjax();
            // archivo con la logica de la base de datos
            url = "buscar_socio.php";
            ajax.open("POST",url,true);
            ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            ajax.onreadystatechange = function()
            {
                if(ajax.readyState == 1)
                { 
                // Buscate una imagen para crear el prealoder, puedes conseguirla en ajaxload.info        
                  msg_sistema.innerHTML = "<img src=\'../ajax-loader.gif\' / alt=\'Cargando...\'>";
                }

                if(ajax.readyState == 4)
                {
                msg_sistema.innerHTML = ajax.responseText
                }
            }
            ajax.send("soc_cod="+soc_cod);
        }
}

echevemaster · #6 (**permalink**) 07/04/2009, 14:44

Código:

window.onload = function()
{
soc_cod  = document.getElementById('soc_cod');

        soc_cod.onchange = function()
        {
            //Este es el div que vas a poner en tu pagina
            var msg_sistema = document.getElementById('msg_sistema');
            //
            soc_cod = document.forms[0].soc_cod.value;
            ajax = nuevoAjax();
            // archivo con la logica de la base de datos
            url = "buscar_socio.php";
            ajax.open("POST",url,true);
            ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            ajax.onreadystatechange = function()
            {
                if(ajax.readyState == 1)
                { 
                // Buscate una imagen para crear el prealoder, puedes conseguirla en ajaxload.info        
                  msg_sistema.innerHTML = "<img src=\'../ajax-loader.gif\' / alt=\'Cargando...\'>";
                }

                if(ajax.readyState == 4)
                {
                msg_sistema.innerHTML = ajax.responseText
                }
            }
//Todo lo que mandes a la pagina buscar_socio debe estar aqui
            ajax.send("soc_cod="+soc_cod);
        }
}

Todos los parametros que envies a la pagina buscar_socio.php deben estar en la orden ajax.send

Recuerda que en el ejemplo que te estoy enviando mandas los parametros por POST por lo cual nop lo puedes llamar en la pagina php por $_GET