동적 텍스트 필드가있는 jQuery 자동 완성이 생성되었습니다.

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 기능