Comunidad de diseño web y desarrollo en internet online

Direccionar resultado de un LiveSearch a un textbox especifo

Foros de discusión > Javascript y jQuery

Citar            
MensajeEscrito el 16 Abr 2009 02:58 pm
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.

des escribió:

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 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 :

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
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
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.

Por desmond

23 de clabLevel



 

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 17 Abr 2009 07:17 pm
Bueno analizando practicamente linea a linea ya di con el problema.

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

escribió:

<?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

escribió:

<?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

Por desmond

23 de clabLevel



 

Envíale un mensaje privado    

firefox
Foros de discusión > Javascript y jQuery

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.