Direccionar resultado de un Live Search a un textbox especifico

gokufast · #1 (**permalink**) 16/04/2009, 08:51

tengo un live search que hize que jala datos de una tabla de mi BD, el live search me sale bien en lo que respecta a socio porque cuando elijo un resultado de la busqueda esta me sale en el textbox del socio.

El problema es cuando hago lo mismo para los garantes, cuando elijo una opcion de los resultados que salen este se va al textbox del socio y no asi al textbox del garante.

Se que es cosa de Ajax, y especificamente dentro el archivo buscar.js, en la funcion selected(choice), pero soy nuevo en esto de ajax y el codigo lo fui adaptando medianamente a mis necesidades pero me tranque en esto, ojala me puedan ayudar.

Aca esta una muestra de la tabla de mi BD.

Cita:

CREATE TABLE `socios` (
`SOC_COD` VARCHAR(20) COLLATE utf8_general_ci DEFAULT NULL,
`SOC_APP` CHAR(20) COLLATE utf8_general_ci DEFAULT NULL,
`SOC_APM` CHAR(20) COLLATE utf8_general_ci DEFAULT NULL,
`SOC_NOMB` CHAR(50) COLLATE utf8_general_ci DEFAULT NULL,
`SOC_CI` CHAR(20) COLLATE utf8_general_ci DEFAULT NULL
)ENGINE=InnoDB
COLLATE 'utf8_general_ci' INSERT_METHOD=NO;
COMMIT;

INSERT INTO `socios` (`SOC_COD`, `SOC_APP`, `SOC_APM`, `SOC_NOMB`, `SOC_CI`) VALUES
('100', 'aaa', 'bbb', 'ccc', '123'),
('200', 'ddd', 'eee', 'fff', '456'),
('300', 'ggg', 'hhh', 'iii', '789'),
('400', 'jjj', 'kkk', 'lll', '135'),
('500', 'mmm', 'nnn', 'ooo', '246');

01.php (la pagina principal)

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabla de Amortizaci&oacute;n de Pr&eacute;stamos</title>
<script type="text/javascript" src="buscar.js"></script>
</head>
<body>

<form method="get" id="searchform" action="">
<div align="center" class="titulo"><strong>Tabla de Amortizaci&oacute;n de Pr&eacute;stamos</strong></div><br>
<table border="1" align="center">
<tr>
   <td class="subtitulos" align="right">
   		Socio:   
   </td>
   <td colspan="5">
   	<input type="text" name="socio" id="socio" size="85" readonly="readonly"/>
   </td>
</tr>
<tr>
   <td align="right" class="subtitulos">Busqueda de Socio:</td>
   <td align="center">
   		<input type="text" value="" name="codigo" id="codigo" onkeyup="request_codigo_socio(this.value);" size="4" maxlength="5"/><br />
     	Numero Socio 
   </td>
</tr>
<tr align="center">
	<td colspan="6" align="left">
    	<div id="tag_update_socio"></div>
    </td>
</tr>
<tr>
   <td class="subtitulos" align="right">
   		Garante 1:   
   </td>
   <td colspan="5">
   	<input type="text" name="garante_1" id="garante_1" size="85" readonly="readonly"/>
   </td>
</tr>
<tr>
   <td align="right" class="subtitulos">Busqueda de Garante 1:</td>
   <td align="center">
   		<input type="text" value="" name="codigo" id="codigo" onkeyup="request_codigo_garante_1(this.value);" size="4" maxlength="5"/><br />
     	Numero Socio 
   </td>
</tr>
<tr>
	<td colspan="6" align="left" >
    	<div id="tag_update_garante_1"></div>
    </td>
</tr>
</table>    
</form>
</body>
</html>

buscar.js

Código PHP:

  var myAjax = ajax();
function ajax() 
{
   var ajax = null;
   if (window.XMLHttpRequest) 
   {
      try 
      {
         ajax = new XMLHttpRequest();
      }
      catch(e) {}
   }
   else if (window.ActiveXObject) 
   {
      try 
      {
         ajax = new ActiveXObject("Msxm12.XMLHTTP");
      }
      catch (e)
      {
         try
         {
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (e) {}
      }
   }
   return ajax;
}

//////////////////////////////////////////////////////////////////////////////
// Datos del Socio
//////////////////////////////////////////////////////////////////////////////
function request_codigo_socio(str) {
   //Don't forget to modify the path according to your theme
   myAjax.open("POST", "ajax_codigo_socio.php");
   myAjax.onreadystatechange = result;
   myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   myAjax.send("search="+str);
}
function result() 
{
   if (myAjax.readyState == 4) 
   {
      var liste = myAjax.responseText;
      var cible = document.getElementById('tag_update_socio').innerHTML = liste;
      document.getElementById('tag_update_socio').style.display = "block";
   }
}

function selected(choice)
{
   var cible = document.getElementById('socio');
      var posc = 0;
      for (var i=cible.value.length-1; i>=0; i--)   
      {
         var caracter = cible.value[i];
         if (caracter==" ")
         {
            posc = i+1;
            break;
         }
      }
   cible.value = cible.value.substring(0,posc)+""+choice+" ";
      cible.focus();
   document.getElementById('tag_update_socio').style.display = "none";
}

//////////////////////////////////////////////////////////////////////////////
// Datos del Garante 1
//////////////////////////////////////////////////////////////////////////////
function request_codigo_garante_1(str) {
   //Don't forget to modify the path according to your theme
   myAjax.open("POST", "ajax_codigo_garante_1.php");
   myAjax.onreadystatechange = result_garante_1;
   myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   myAjax.send("search="+str);
}
function result_garante_1() 
{
   if (myAjax.readyState == 4) 
   {
      var liste = myAjax.responseText;
      var cible_garante_1 = document.getElementById('tag_update_garante_1').innerHTML = liste;
      document.getElementById('tag_update_garante_1').style.display = "block";
   }
}

function selected_garante_1(choice)
{
   var cible_garante_1 = document.getElementById('garante_1');
      var posc = 0;
      for (var i=cible_garante_1.value.length-1; i>=0; i--)   
      {
         var caracter = cible_garante_1.value[i];
         if (caracter==" ")
         {
            posc = i+1;
            break;
         }
      }
   cible_garante_1.value = cible_garante_1.value.substring(0,posc)+""+choice+" ";
   cible_garante_1.focus();
   document.getElementById('tag_update_garante_1').style.display = "none";
}

ajax_codigo_socio.php

Código PHP:

  <?php
if (isset($_POST['search']))
    $search = htmlentities($_POST['search']);
else
   $search ='';
$db = mysql_connect('localhost','root','xXx'); //Don't forget to change
mysql_select_db('ufv', $db);           //theses parameters
$arreglo = explode(' ', $search);
if($arreglo[count($arreglo)-1]=="" || $arreglo[count($arreglo)-1]==" "){
   mysql_close();
   die();
}
$sql = "SELECT soc_cod,soc_app,soc_apm,soc_nomb,soc_ci from socios WHERE soc_cod LIKE '".$arreglo[count($arreglo)-1]."%' ORDER BY soc_cod";
$req = mysql_query($sql) or die();
echo "<ol>";
while ($data = mysql_fetch_array($req))
{
   echo "<li><a href='#' onclick='selected(this.innerHTML);'>";
   echo $data['soc_cod']." ";
   echo $data['soc_app']." ";
   echo $data['soc_apm']." ";
   echo $data['soc_nomb']." ";
   echo $data['soc_ci'];
   echo "</a></li>";
}
echo "</ol>";
mysql_close();
?>

ajax_codigo_garante_1.php

Código PHP:

  <?php
if (isset($_POST['search']))
    $search = htmlentities($_POST['search']);
else
   $search ='';
$db = mysql_connect('localhost','root','xXx'); //Don't forget to change
mysql_select_db('ufv', $db);           //theses parameters
$arreglo = explode(' ', $search);
if($arreglo[count($arreglo)-1]=="" || $arreglo[count($arreglo)-1]==" "){
   mysql_close();
   die();
}
$sql = "SELECT soc_cod,soc_app,soc_apm,soc_nomb,soc_ci from socios WHERE soc_cod LIKE '".$arreglo[count($arreglo)-1]."%' ORDER BY soc_cod";
$req = mysql_query($sql) or die();
echo "<ol>";
while ($data = mysql_fetch_array($req))
{
   echo "<li><a href='#' onclick='selected(this.innerHTML);'>";
   echo $data['soc_cod']." ";
   echo $data['soc_app']." ";
   echo $data['soc_apm']." ";
   echo $data['soc_nomb']." ";
   echo $data['soc_ci'];
   echo "</a></li>";
}
echo "</ol>";
mysql_close();
?>

espero me haya expresado bien y me puedan ayudar.

eall · #2 (**permalink**) 16/04/2009, 10:09

Basicamente es porque tus campos tienen el mimo ID (codigo) cambia los nombre a codigoSocio y codigoGarante y así te va a funcionar sin problemas.

Espero que sea el unico problema que tengas.

Saludos.

gokufast · #3 (**permalink**) 16/04/2009, 11:34

te refieres al id del textbox donde se realiza la busqueda?

eall · #4 (**permalink**) 16/04/2009, 14:12

ahora que veo tu codigo con mayor detención, probablemente sea la funcion selected. lo mas seguro es que al haber una respuesta siempre llame a esta función y no a la que tu definiste.

yo tampoco se mucho de ajax pero he hecho un tutorial de autocomple con jQuery más un plugin y lo puedes utilizar para tantos texbox quieras. si quieres puedes ver mi blog en mi perfil.

disculpa por la respuesta anterior, fue muy a la rapida.

Exito.

gokufast · #5 (**permalink**) 17/04/2009, 09:34

pues no me salen en la lista los resultados de mi query

eall · #6 (**permalink**) 17/04/2009, 10:28

descarga este plugin http://plugins.jquery.com/project/autocompletex y jQuery

incluyes estos archivos

Código javascript:

Ver original<script type="text/javascript" src="js/jquery.js"></script>
<script type='text/javascript' src="js/jquery.autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" />
<script type="text/javascript" src="js/jquerymenu/jqueryslidemenu.js"></script>
<script type='text/javascript' src="js/jquery.autocomplete.js"></script>

luego creas la función javascript jQuery

Código javascript:

Ver original<script type="text/javascript" >
 
$(document).ready(function(){
 
        $('#txtNombre').autocomplete('search.php?tip=a&opt=1', {
            width: 260,
            selectFirst: false
        }).result(function(event, data, formatted) {
            $('#txtNombre').val(data[1]);
            $('#txtEdad').val(data[2]);
            $('#txtDireccion').val(data[3]);
            $('#selSexo').val(data[4]);
            $('#selEstCivil').val(data[5]);
        });
});
</script>

luego creas un archivo llamado search.php y le colocas este codigo y reemplazas la consulta y el resultado

Código php:

Ver original<?php
session_start();
require_once ("conexion/class.conexionDB.inc.php");
$conn = new conexionBD ( );
extract ( $_GET );
 
/* Consulta a Bases de datos. */
if (isset ( $tip ) && $tip == 'a'){
    if ($opt == 1) {
        $sql = " SELECT DISTINCT
                    PER_NOMBRE,
                    PER_EDAD,
                    PER_DIRECCION,
                    PER_SEXO,
                    PER_ESTCIVIL
                FROM
                    PERSONA";
        if($q != ""){
            $sql .= " WHERE
                        (PER_NOMBRE like N'%$q%')  ";
        }
        $sp = $conn->EjecutarSQL ( $sql );
        //$separador = "MOD: ";
        while ( $row5 = $conn->FetchArray( $sp ) ) {
            $str .= trim ( $row5 [PER_NOMBRE] ) . " $row5[PER_EDAD] - $row5[PER_SEXO]";  //LO QUE SERA MOSTRADO EN EL RECUADRO DESPLEGABLE
            $str .= '|';
            $str .= trim ( $row5 [PER_NOMBRE] ); //LO QUE ASIGNAREMOS AL CAMPO NOMBRE
            $str .= '|';
            $str .= trim ( $row5 [PER_EDAD] );
            $str .= '|';
            $str .= trim ( $row5 [PER_DIRECCION] );
            $str .= '|';
            $str .= trim ( $row5 [PER_SEXO] );
            $str .= '|';
            $str .= trim ( $row5 [PER_ESTCIVIL] );
            $str .= "\n";
        }
    }
}
 
echo $str;
?>

recuerda colocar nombres e ID distintas para cada campo, ya que JS trabaja con las ID.

Que estes bien y espero que te resulte.

gokufast · #7 (**permalink**) 17/04/2009, 13:26

gracias!!! lo probare.

Bueno analizando practicamente linea a linea ya di con el problema, que tenia

en el archivo ajax_codigo_garante_1.php estaba direccionando a la funcion selected() del socio en el archivo buscar.js

este es el archivo ajax_codigo_socio.php

Cita:

<?php
if (isset($_POST['search']))
$search = htmlentities($_POST['search']);
else
$search ='';
$db = mysql_connect('localhost','root','xXx'); //Don't forget to change
mysql_select_db('ufv', $db); //theses parameters
$arreglo = explode(' ', $search);
if($arreglo[count($arreglo)-1]=="" || $arreglo[count($arreglo)-1]==" "){
mysql_close();
die();
}

En el primer echo del while podemos ver que al hacer clic llama a la funcion selected del socio en el archivo buscar.js.

ahora veremos que en la misma fila en el archivo ajax_codigo_garante_1.php tiene que llamar a la funcion selected_garante_1() del archivo buscar.js

ajax_codigo_garante_1.php

$sql = "SELECT soc_cod,soc_app,soc_apm,soc_nomb,soc_ci from socios WHERE soc_cod LIKE '".$arreglo[count($arreglo)-1]."%' ORDER BY soc_cod";
$req = mysql_query($sql) or die();
echo "<ol>";
while ($data = mysql_fetch_array($req))
{
echo "<li><a href='#' onclick='selected(this.innerHTML);'>";
echo $data['soc_cod']." ";
echo $data['soc_app']." ";
echo $data['soc_apm']." ";
echo $data['soc_nomb']." ";
echo $data['soc_ci'];
echo "</a></li>";
}
echo "</ol>";
mysql_close();
?>

ajax_codigo_garante_1.php

Cita:

<?php
if (isset($_POST['search']))
$search = htmlentities($_POST['search']);
else
$search ='';
$db = mysql_connect('localhost','root','xXx'); //Don't forget to change
mysql_select_db('ufv', $db); //theses parameters
$arreglo = explode(' ', $search);
if($arreglo[count($arreglo)-1]=="" || $arreglo[count($arreglo)-1]==" "){
mysql_close();
die();
}
$sql = "SELECT soc_cod,soc_app,soc_apm,soc_nomb,soc_ci from socios WHERE soc_cod LIKE '".$arreglo[count($arreglo)-1]."%' ORDER BY soc_cod";
$req = mysql_query($sql) or die();
echo "<ol>";
while ($data = mysql_fetch_array($req))
{
echo "<li><a href='#' onclick='selected_garante_1(this.innerHTML);'>";
echo $data['soc_cod']." ";
echo $data['soc_app']." ";
echo $data['soc_apm']." ";
echo $data['soc_nomb']." ";
echo $data['soc_ci'];
echo "</a></li>";
}
echo "</ol>";
mysql_close();
?>

con este cambio da exactamente como quiero que salga.

espero que le sea de ayuda a alguien porque me pase vaaarias horas probando varios codigos live search que se acomode a lo que buscaba hasta que di con este y lo fui acomodando, a mis necesidades.

saludos