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);
}