Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/04/2015, 14:56
MoisesDavidAaron
 
Fecha de Ingreso: enero-2015
Mensajes: 2
Antigüedad: 9 años, 3 meses
Puntos: 0
Información jQuery Autcomplete MySQL en Campos Dinámicos

Tengo un formulario para el ingreso de materiales, en el cual, necesito implementar la función autocomplete, el usuario selecciona el material en el campo "nombre de material" y al hacer focusout se llenan los campos "codigo" y "unidad".

En este formulario se pueden crear tantos filas de inputs, como sean necesarias (esto dependiendo de los materiales a procesar en la misma orden). Para esto usé jQuery.

Ya me funciona el autocomplete para el input estatico y para el primer input que se crea dinámicamente, pero para los demás aunque selecciono la opcion me toma el valor del primer input que se crea dinamicamente.

AYUDA POR FAVOR! GRACIAS DE ANTEMANO.

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. var pos = 2;
  3.  
  4.  
  5. $(document).ready(function () {
  6.     $('#addUser')
  7.         .button()
  8.         .on({
  9.         click: function () {
  10.             $('#tabla tbody #campos')
  11.                 .append("<tr id='row" + pos + "'><th width='83' class='sombra7'><input type='text' name='posicion[]' value='" + pos + "' size='2'></th><td width='110' class='sombra7'><input required type='text' name='codigo[]' size='8' class='codigo2' id='codigo"+pos+ "' ></td><td width='50' class='sombra7'><input required onChange='mayusculas(this)' type='text' name='nombre[]' class='nombre2' id='nombres" + pos + "' size='26' maxlength='30' onKeyPress='return(formatoCampo(this,event,2))'></td><td width='123' class='sombra7'><input required type='text' name='cantidad_solicitada[]' size='4' ></td><td width='100' class='sombra7'><input required type='text' name='cantidad_recibida[]' size='4'></td><td width='190' class='sombra7'><input required onChange='mayusculas(this)' type='text' name='unidad[]' size='15' maxlength='30' class='unidad2' id='unidad"+pos+ "'></td><td width='120' class='sombra7'><button id='deleteUser" + pos + "' data-id='" + pos + "'><img src='images/iconos/eliminar.png' /></button></td></tr>");
  12.            
  13.             $("#nombres" + pos).autocomplete({
  14.                 source: "buscarmaterial.php",
  15.                 });          
  16.            
  17.             $("#nombres" + pos).focusout(function(){
  18.                 $.ajax({
  19.                     url:'buscarmaterial2.php',
  20.                     type:'POST',
  21.                     dataType:'json',
  22.                     data:{ nombres:$('.nombre2').val()}
  23.                 }).done(function(respuesta){
  24.                     $(".codigo2").val(respuesta.cod_material);
  25.                     $(".unidad2").val(respuesta.unidad);
  26.                 });
  27.             });
  28.    
  29.            
  30.             $('#deleteUser' + pos)
  31.                 .button()
  32.                 .on({
  33.                 click: function () {
  34.                     var id = $(this).attr('data-id');
  35.                     $('#row' + id).remove();
  36.                     pos--;
  37.                 }
  38.             });
  39.             pos++;
  40.         }
  41.     });
  42.             $('#deleteUser1').button()
  43.                 .on({
  44.                 click: function () {
  45.                     var id = $(this).attr('data-id');
  46.                     $('#row' + id).remove();
  47.                     pos--;
  48.                 }
  49.             });
  50.  
  51.             $( "#nombre" ).autocomplete({
  52.                     source: "buscarmaterial.php",
  53.                 });
  54.                
  55.                 $("#nombre").focusout(function(){
  56.                     $.ajax({
  57.                         url:'buscarmaterial2.php',
  58.                         type:'POST',
  59.                         dataType:'json',
  60.                         data:{ nombres:$('#nombre').val()}
  61.                     }).done(function(respuesta){
  62.                         $("#codigo").val(respuesta.cod_material);
  63.                         $("#unidad").val(respuesta.unidad);
  64.                     });
  65.                 });
  66.    
  67. });
  68. </script>