jQuery Autocomplete with dynamic textfield generated

Question

i'm trying to use jquery autocomplete with dynamic textfield generated, autocomplete works but the main problem is i cant populate textfield with name 'alamat' properly. How to set current textfield 'alamat' value properly in autocomplete ?

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>

my autocomplete.php generate JSON result

[{
    "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"
}]

I upload my script on fiddle in this link!

thanks in advanced.

Answer 1

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

Your selector will populate all inputs with class='searchAlamat' that are contained in the page.

WIthin the select callback, this will be the current input instance that autocomplete is bound to so you can traverse within the row it is in:

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

DEMO

Note that I removed focus functionality