[SOLUCIONADO] 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

[El_Metallick]

Es lógico que te funcione sólo con el primer caso, porque tienes un problema con los identificadores, recuerda que un grupo de objetos se pueden asociar (y de hecho el DOM así lo hace) en un arreglo cuando comparten el atributo name pero el atributo id (identificador) debe ser único para cada caso, de no ser así, sólo el primer objeto con un identificador "recambio" en este caso, responde a los llamados por id. En tu código accedes al objeto mediante "#recambio" (el cual hace el llamado justamente mediante el atributo "id" del objeto HTML) por lo que sólo te muestra el primer objeto cuyo identificador es "recambio". Intenta haciendo el llamado con algo del tipo "input[name=recambio]" lo cual seleccionará todos los obtejos input cuyo atributo name="recambio".

Espero te ayude la explicación anterior.

Saludos

PD: no estoy 100% seguro de que funcione, porque estás agregando objetos de forma dinámica.

[satjaen]

Iniciado por El_Metallick

Es lógico que te funcione sólo con el primer caso, porque tienes un problema con los identificadores, recuerda que un grupo de objetos se pueden asociar (y de hecho el DOM así lo hace) en un arreglo cuando comparten el atributo name pero el atributo id (identificador) debe ser único para cada caso, de no ser así, sólo el primer objeto con un identificador "recambio" en este caso, responde a los llamados por id. En tu código accedes al objeto mediante "#recambio" (el cual hace el llamado justamente mediante el atributo "id" del objeto HTML) por lo que sólo te muestra el primer objeto cuyo identificador es "recambio". Intenta haciendo el llamado con algo del tipo "input[name=recambio]" lo cual seleccionará todos los obtejos input cuyo atributo name="recambio".

Espero te ayude la explicación anterior.

Saludos


PD: no estoy 100% seguro de que funcione, porque estás agregando objetos de forma dinámica.

Gracias por contestar. Ademas de lo que comentas tambien tenia algún error mas. Lo he puesto así pero sigue sin funcionarme:

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='recambio1' id='recambio1' 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++;
    
    
    
}
 
$( "#recambio1").autocomplete({
            minLength: 2,
            source: availableTags
        });
 
function borrarUltima() {
   ultima = document.all.tabla.rows.length - 1;
   if(ultima > -1){
      document.all.tabla.deleteRow(ultima);
      contLin--;
   }
}
   </script>
 

Un saludo


EDITO: Tenia que repetir otra vez todo en la funcion agregar.

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='recambio1' id='recambio1' 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() {
        
        <?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
                
        $( "#recambio1").autocomplete({
            minLength: 2,
            source: availableTags
        });
        
    
   }
}
   </script>
 

Gracias

[El_Metallick]

veamos, a lo que me refiero es la forma mediante la cual accedes al objeto, concretamente en esta parte del código:

Código:

        $("#recambio1").autocomplete({
            minLength: 2,
            source: availableTags
        });

Repazando algo de jQuery, el # se utiliza para hacer referencia al atributo id de los objetos HTML. Como el id es un identificador ÚNICO (o al menos así debería ser), DOM reconoce sólo el primer elemento con un id determinado, los demás cuyos ids sean el mismo, no serán visibles al momento de rescatarlos por dicho atributo. Es por este motivo que te propuse recatar los elementos por otro atributo como puede ser el name. Y para el caso aún más puntual, te dí la línea "input[name=recambio]" que buscará sólo entre los objetos del tipo input aquellos que tengan el atributo name con el valor "recambio". Esto en código quedaría algo así:

Código:

        $("input[name=recambio]").autocomplete({
            minLength: 2,
            source: availableTags
        });

Espero te sea de ulitilidad, ya me comentarás como te va.

Saludos