Me hace el autocompletado sólo en la primera fila.

[satjaen]

Hola, he hecho un autocompletado en un código. En dicho código agrego filas en un div donde tengo un input llamado recambio que es donde hago el autocompletado. Pero sólo me hace el autocompletado en la primera fila. Y cuando agrego mas filas ya no lo hace.

funcion agregar filas:

Código Javascript:

function agregar() {
   
   var contLin = 3;
   var tr, td, tabla;
 
   tabla = document.getElementById('tabla');
   tr = tabla.insertRow(tabla.rows.length);
   td = tr.insertCell(tr.cells.length);
   td.innerHTML = "<input name='button' type=button onclick='agregar()' value='+' >";
   td = tr.insertCell(tr.cells.length);
   td.innerHTML = "<input name='button' type=button onclick='borrarUltima()' value='-' >";
   td = tr.insertCell(tr.cells.length);
   td.innerHTML = "<input type='text' value='' size='5' >";
   td = tr.insertCell(tr.cells.length);
   td.innerHTML = "<input type='text' name='recambio' id='recambio' size='10' >";
   td = tr.insertCell(tr.cells.length);
   td.innerHTML = "<input type='text' value='' size='25' >";
   td = tr.insertCell(tr.cells.length);
   td.innerHTML = "<input type='text' value='' size='5' >";
   td = tr.insertCell(tr.cells.length);
   td.innerHTML = "<input type='text' value='' size='5' >";
   td = tr.insertCell(tr.cells.length);
   td.innerHTML = "<input type='text' value='' size='5' >";
   td = tr.insertCell(tr.cells.length);
   td.innerHTML = "<input type='text' value='' size='5' >";
   td = tr.insertCell(tr.cells.length);
   td.innerHTML = "<img src='imagenes_menu/untitled.png' width='20' height='20' style='cursor:pointer' />";
   contLin++;
}
 
function borrarUltima() {
   ultima = document.all.tabla.rows.length - 1;
   if(ultima > -1){
      document.all.tabla.deleteRow(ultima);
      contLin--;
   }
}
   </script>
 

El autocompletado:

Código Javascript:

<?php
include("conexion_autocompletado.php");//se incluyen los datos para realizar la conexion a su base de datos
$con2 ="SELECT recambio
FROM  almacen000"; //consulta para seleccionar las palabras a buscar, esto va  a depender de su base de datos//consulta para seleccionar las palabras a  buscar, esto va a depender de su base de datos
$query = mysql_query($con2);
?>
<script>
   $(function() {
      
      <?php
      
      while($row= mysql_fetch_array($query)) {//se reciben los valores y se almacenan en un arreglo
      
     $elementos[]= '"'.$row['recambio'].'"';
    
}
$arreglo= implode(", ", $elementos);
//junta los valores del array en una sola cadena de texto
 
      ?>   
      
      var availableTags=new Array(<?php echo $arreglo; ?>);//imprime el arreglo dentro de un array de javascript
            
      $( "#recambio").autocomplete({
         minLength: 2,
         source: availableTags
      });
      
   
    $(document).keypress(function(e){
                switch(e.which)
                {
                    case 13:  nuevo_cliente(); ///// Enter /////
                             break;
                }
            });   
      
   });   
   
var popup = null;
      function nuevo_cliente(recambio)
      {
         // Si el popup ya existe lo cerramos
         if(popup!=null)
            popup.close();
 
         // Capturamos las dimensiones de la pantalla para centrar el popup
         altoPantalla = parseInt(screen.availHeight);
         anchoPantalla = parseInt(screen.availWidth);
         
         // Calculamos el centro de la pantalla
         centroAncho = parseInt((anchoPantalla/2))
         centroAlto = parseInt((altoPantalla/2))
   
         // dimensiones del popup
         anchoPopup = 500;
         altoPopup = 200;
 
         // Calculamos las coordenadas de colocación del Popup
         laXPopup = centroAncho - parseInt((anchoPopup/2))
         laYPopup = centroAlto - parseInt((altoPopup/2))
         
         
            var recambio = $('#recambio') .val();
   
   
         // Definimos que página vamos a ver
         pagina = "buscar_recambio.php?id=" +recambio;
         
         popup  = window.open(pagina,"Imagenes","scrollbars=yes,status=no,width=" +  anchoPopup + ", height=" + altoPopup + ",left = " + laXPopup + ",top = "  + laYPopup);
   
}
</script>
 

El div donde agrego las filas:

Código HTML:

<div class="albaran">
<table id="tabla">
<tr class="cab_factura">
     <td class="enlace10"></td>
    <td class="enlace10"></td>
    <td class="enlace10">Almacén</td>
    <td class="enlace10">Referencia</td>
    <td class="enlace10">Descripción</td>
    <td class="enlace10">Cantidad</td>
    <td class="enlace10">Precio</td>
    <td class="enlace10">%Dto.</td>
    <td class="enlace10">Total</td>
    <td class="enlace10"></td>
  </tr>
 
<tr>
   <td><input name="button" type=button onclick="agregar();" value="+"  /></td>
   <td><input name="button" type=button onclick="borrarUltima();" value="-"/></td>
    <td ><input name="almacen" type="text" size="5"  /></td>
    <td><input name="recambio" id="recambio" type="text" size="10"/></td>
    <td><input name="descripcion" type="text" size="25"  /></td>
    <td><input name="cantidad" type="text" size="5"  /></td>
    <td><input name="precio" type="text" size="5"  /></td>
    <td><input name="descuento" type="text" size="5"  /></td>
    <td><input name="total" type="text" size="5" /></td>
     <td><img src="imagenes_menu/untitled.png"  onclick="nuevo_cliente();" width="20" height="20" style="cursor:pointer"  /></td>
  </tr> 
</table>
</div>
 

Gracias y un saludo