[SOLUCIONADO] Como implementar funcion Ajax-Autocomplete

[_JarC]

Buenas parcero

Estoy realziando un proyecto en MCV + ORACLE y estoy en un dilema y no puedo hacer lo mas sencillo creo...

La idea es la siguiente, traigo varios valores de una consulta dinamica id, producto, cantidad, etc.

En la columna productos deseo escribir el id del productos y este me debe mostrar al frente el nombre por medio de una funcion ajax. funciona para la primera columna pero de hay para adelante si escribo en el siguiente ya no funciona pues como todos los input que se generan dinamicamente tienen el mismo name e id pues solo me va a mostrar en el primero.

Pues ya hize alguna pruebas secillas para cambiar el nombre e id del input en +1 pero quiero que cuando llege al ajax este haga lo mismo

Espero haber explicado bn

Aqui les dejo una captura






CONTROLADOR

Código PHP:

  public function listarProductosAjax() 
     { 
         $aux = $_POST['q']; 
        // $aux1 = $_GET['id']; 
         
 
         $m = new Model(Config::$mvc_bd_usuario, 
                     Config::$mvc_bd_clave, Config::$mvc_bd_hostname); 
 
         $productoajax = $m->verProductoAjax($aux); 
 
         $paramsVerAjax = $productoajax; 
 
         
 
        return $paramsVerAjax; 
     }  
   

MODELO

Código PHP:

       public function verProductoAjax($id) 
        { 
         $id = htmlspecialchars($id); 
         $id1=1; 
 
         $sql="select PRO_NOMBRE from PRODUCTOS where PRO_ID LIKE '".$id."%'"; 
 
 
         $result = oci_parse($this->conexion,$sql); 
         oci_execute($result, OCI_DEFAULT); 
         //$devolucion = array(); 
 
         $row = oci_fetch_array($result); 
        echo $row['PRO_NOMBRE']; 
        // $row = $result; 
        // return $row; 
        }  
   

VISTAS

Código PHP:

<div class="table-responsive">
 <table align="center" class="table table-condensed table-hover">
     <tr>
         <th>#</th>
         <th>Producto</th>
         <th>...</th>
         <th>Cantidad</th>
         <th>Reserva</th>         
         <th>Producto</th>
         <th>Cantidad</th>
         
         <th>Tipo Reserva</th>
         
 
     </tr>
 
<?php 
 
 
?>
  <?php foreach ($paramsPD['productoD'] as $paramsPD1) :?>
<?php 
 
 
$nameb="bus";
$sum++;
//$sumando=$sum+1;
$bus=$nameb.$sum;
echo $bus;
?>
 
     <tr>
         <td><?php echo $paramsPD1['PD_ID'] ?></td>
         <td>        
 
            
[B]          Buscar <input type="text" id="<?php echo $bus ?>" 
name="<?php echo $bus ?>" onkeyup="loadXMLDoc()" required /></td>
 
 <td><div id="myDiv"> </div></td>
[/B]
      
         <td><input type="number" name="cantidad" min="1" required placeholder="Cantidad de Productos" class="form-control" id="" size="" value="<?php echo $paramsPD1['PD_CANTIDAD']?>"/></td>
          
 
 
.....
 
        
     </tr>
     <?php endforeach; ?>
 

Ajax

Código Javascript:

function loadXMLDoc()
{
var xmlhttp;
 
var n=document.getElementById('bus1').value;
 
if(n==''){
 document.getElementById("myDiv").innerHTML="";
 return;
}
 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }else{ document.getElementById("myDiv").innerHTML='<img src="load.gif" width="50" height="50" />'; }
  }
xmlhttp.open("POST","index.php?ctl=buscarajax",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("q="+n);
}
 

[Alexis88]

En lugar de trabajar con el mismo id en la función loadXMLDoc, pásaselo mediante la llamada a la función.

Código PHP:

<input type="text" id="<?php echo $bus; ?>" 
name="<?php echo $bus; ?>" onkeyup="loadXMLDoc('<?php echo $bus; ?>')" required />
 

Por otro lado, veo que asignas el mismo valor para el id de los <div> que se generan en el bucle foreach. Creo que deberías de hacer lo mismo que con el id de los <input> y también pasar dicho valor a la función.

Saludos

[_JarC]

BueBuenas parcero muchas gracias por la colaboracion

estuve probando tu codigo pero no di con la solucion -_-!

con respecto a esta parte de codigo esto algo q puse pero no le pongas cuidado, yo queria implementar para que cada varible bus fuera bus1,bus2..etc. para poder cogerlas en AJAX con un for o algo asi donde coja toda los bus q se crean

$nameb="bus";
$sum++;
//$sumando=$sum+1;
$bus=$nameb.$sum;
echo $bus;

El código original servia *así

Código PHP:

* * * *Buscar <input type="text" id="bus" 
name="bus" onkeyup="loadXMLDoc()" required /></td>
 

pero como te decía se hace una consulta a oracle que me trae los datos dinamicamente y yo implemente el auto complete pero obviamente solo me sirve para el primer campo que es bus porque esa es la variable que llega a AJAX pero como de hay para abajo me crea dinamicamente varias *campos con oracle con la misma varible bus pues solo funciona la primera.

osea segundo campo = bus
tercer campo = bus
pero solo funciona la primera

[Alexis88]

Por eso mismo te digo que debes de pasar el id de cada caja de texto a la función, para que no ocurra el conflicto que se te está presentando. En mi anterior respuesta, te indiqué cómo enviar el id a la función, ahora, solo te queda recibir dicho dato en la función y así podrás tomar los valores de las cajas creadas dinámicamente. Probablemente no te haya funcionado la recomendación porque te faltó la implementación en la función. Solo te toca recibirla y tomar a la caja de texto por dicho identificador.

Código Javascript:

function loadXMLDoc(id){
    var xmlhttp,
        n = document.getElementById(id).value;
 
    //El resto de la función
}
 

Como veo que también generas un <div> en el bucle, sería ideal que le asignes un id dinámico, así como lo haces con las cajas de texto y que también se lo pases a la función, quedando todo así:

Código PHP:

<?php
$idDiv = 'div' . $sum;
?>
<input type="text" id="<?php echo $bus; ?>" 
name="<?php echo $bus; ?>" onkeyup="loadXMLDoc('<?php echo $bus; ?>', '<?php echo $idDiv; ?>')" required />
<div id="<?php echo $idDiv; ?>"> </div>
 

Código Javascript:

function loadXMLDoc(id, idDiv){
    var xmlhttp,
        n = document.getElementById(id).value;
 
    if (n == ''){
        document.getElementById(idDiv).innerHTML = "";
        return;
    }
 
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else{// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById(idDiv).innerHTML=xmlhttp.responseText;
        }
        else{ 
            document.getElementById(idDiv).innerHTML='<img src="load.gif" width="50" height="50" />'; 
        }
    }
    xmlhttp.open("POST","index.php?ctl=buscarajax",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("q="+n);
}
 

Saludos

[_JarC]

Muchas gracias por la colaboración parcero, ya encontre una solucion aunque es casi la misma que la que me dejas,

Muchisimas Gracias

Código PHP:

<?php foreach ($paramsPD['productoD'] as $paramsPD1) :?>
<?php 
 
static $sum = 0;
$sum++;
$bus = 'bus';
$bus .= $sum;
?>
     <tr>
         <td><?php echo $paramsPD1['PD_ID'] ?></td>
         <td><input type="text" id="<?php echo $bus ?>" name="<?php echo $bus ?>" onkeyup="loadXMLDoc(<?php echo $sum ?>)" required /></td>       
         <td><div id="myDiv<?php echo $sum ?>"></div></td>
 

Código Javascript:

function loadXMLDoc(id)
{
var xmlhttp;
 
//var n=document.getElementById('bus1').value;
var n=document.getElementById('bus' + id).value;
 
if(n==''){
 document.getElementById("myDiv" + id).innerHTML="";
 //document.getElementById("myDiv").innerHTML="";
 return;
}
 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    
    document.getElementById("myDiv" + id).innerHTML=xmlhttp.responseText;
    }else{ document.getElementById("myDiv" + id).innerHTML='<img src="../web/img/load.gif" width="50" height="50" />'; }
   
  }
xmlhttp.open("POST","index.php?ctl=buscarajax",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("q="+n);
}
 

[Alexis88]

Y yo creyendo que en $bus se almacenaba el valor del id.

Aunque, viendo bien el código, sí es así.

Código PHP:

$nameb="bus";
$sum++;
$bus=$nameb.$sum;