jQuery Autocomplete with dynamic textfield generated

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.

Answers


$('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


Need Your Help

F# block arguments

f#

C# has anonymous delegates. So I can write:

How to fetch Oracle reference cursor into table variable?

oracle stored-procedures ref-cursor

I am trying to load data from reference cursor into a table variable (or array), the reference cursor works if the table variable is based on existingtable %Rowtype but my reference cursor gets