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

Any way for Java Print to ignore lpoptions?

java linux printing debian cups

I'm using the javax.print API to print a Jasper Report on Debian Linux. For some reason the saved lpoptions (CUPS settings) always override settings choosen on the Java Print dialog. At this point ...

Strange SecKeyEncrypt behaviour

ios objective-c cocoa-touch rsa

I'm trying to implement RSA encryption with PKCS1 padding using SecKeyEncrypt function.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.