jQuery Autocomplete с генерируемым динамическим текстовым полем

Question

Я пытаюсь использовать автозаполнение jquery с созданным динамическим текстовым полем, автозаполнение работает, но главная проблема заключается в том, что я не могу заполнить текстовое поле с именем «alamat» правильно. Как правильно установить текущее значение поля «alamat» в автозаполнении?

HTML

<form id="myForm" name="myForm" method="post"> 
<table id="myTable" border="1" cellpadding="1" cellspacing="1"> 
    <thead> 
     <th>No</th><th>Nama</th><th>Alamat</th> 
    </thead> 
    <tbody></tbody> 
</table> 
<input id="addButton" name="addButton" type="button" value="Add an input" /> 
<input id="removeButton" name="removeButton" type="button" value="Remove an input" /> 
</form> 

JS

<script type="text/javascript"> 
var counter = 1; 
$(function() { 
    var options = { 
    source: 'autocomplete.php', 
    minLength: 2, 
    focus: function(event, ui) { 
      $('#nama_' + counter).val(ui.item.value);       
      $('#alamat_' + counter).val(ui.item.alamat); 
      console.log(ui.item.alamat);  
     }, 
     select: function(event, ui) { 
      $('#nama_' + counter).val(ui.item.value);       
      $('#alamat_' + counter).val(ui.item.alamat); 
      console.log(ui.item.alamat); 
     } 
    }; 

    $('input.searchNama').live("keydown.autocomplete", function() { 
     $(this).autocomplete(options); 
    }); 

    var addInput = function() { 
     if (counter > 1){ 
      $('input#removeButton').removeAttr('disabled'); 
     } 

     var inputHTML = ' <tr><td><div id="' + counter + '">'+ counter +'</div></td><td><input type="text" id="nama_' +counter + '" class="searchNama" name="nama_' + counter +' " value="" /></td><td><input type="text" id="alamat_' + counter + '" class="searchAlamat" name="alamat_' + counter + '" value="" /></td></tr>'; 
     $(inputHTML).appendTo("table#myTable tbody"); 
     $("input.searchNama:last").focus(); 
     counter++; 
    }; 

    var removeInput = function() { 
     counter--; 
     if(counter == 1){ 
      $('input#removeButton').attr('disabled','disabled'); 
      counter++; 
      console.log('Jika Counter == 1 :' + counter); 
     } else { 
      $("table#myTable tbody tr:last").remove(); 
      console.log('Jika Counter != 1 :' + counter); 
     } 
    }; 

    if (!$("table#myTable tbody").find("input.searchNama").length) { 
     addInput(); 
    } 

    $("input#addButton").click(addInput); 
    $("input#removeButton").click(removeInput); 
}); 
</script> 

мой autocomplete.php генерировать JSON результата

[{ 
    "label": "Aditya Nursyahbani - Jl. Bratasena IX Blok U6 No. 7", 
    "value": "Aditya Nursyahbani", 
    "alamat": "Jl. Bratasena IX Blok U6 No. 7" 
    }, 
{ 
    "label": "Slamet Aji Pamungkas - Jl. Melati 2 No. 3", 
    "value": "Slamet Aji Pamungkas", 
    "alamat": "Jl. Melati 2 No. 3" 
}] 

загрузить свой скрипт на скрипку в этом link!

спасибо в продвинутом виде.

Answer 1

$('input.searchAlamat').val(ui.item.alamat);

Ваш селектор будет заполнить все входы с class='searchAlamat', которые содержатся на странице.

в пределах select обратного вызова, this будет текущий экземпляр ввода, автозаполнение обязан, так что вы можете перемещаться внутри строки она находится в:

$(this).closest('tr').find('input.searchAlamat').val(ui.item.alamat); 

DEMO

Обратите внимание, что Я удалил focus Функциональность