Question

with the help of resources of stackoverflow, i have managed to make autocomplete on multiple fields as:

    $(function(){
        $('.auto_isrc').live('keyup.autocomplete', function(){
            var srs = "xtras/search_isrc.php";
            $(this).autocomplete({
                source: srs,
                dataType: "json",
                minLength: 2,
                select: function(event, ui) {
                    $("[col=isrc_id] input").val(ui.item ? ui.item.isrc_ID : "");
                    $("[col=ISRC] input").val(ui.item.ISRC);
                    $("[col=Track_Name] input").val(ui.item.Track_Name);
                    $("[col=ArtistName] input").val(ui.item.ArtistName);
                    $("[col=Track_Time] input").val(ui.item.Track_Time);
                    $("[col=Writer] input").val(ui.item.Writer);
                    $("[col=Publisher] input").val(ui.item.Publisher);
                    $("[col=TrackPLineYear] input").val(ui.item.TrackPLineYear);
                    $("[col=TrackPLineInfo] input").val(ui.item.TrackPLineInfo);
                    $("[col=TrackCLineYear] input").val(ui.item.TrackCLineYear);
                    $("[col=TrackCLineInfo] input").val(ui.item.TrackCLineInfo);
                },
                change: function(event, ui) {
                    $("[col=isrc_id] input").val(ui.item ? ui.item.isrc_ID : "");
                    if (ui.item) {
                        $("[col=ISRC] input").val(ui.item.ISRC);
                        $("[col=Track_Name] input").val(ui.item.Track_Name);
                        $("[col=ArtistName] input").val(ui.item.ArtistName);
                        $("[col=Track_Time] input").val(ui.item.Track_Time);
                        $("[col=Writer] input").val(ui.item.Writer);
                        $("[col=Publisher] input").val(ui.item.Publisher);
                        $("[col=TrackPLineYear] input").val(ui.item.TrackPLineYear);
                        $("[col=TrackPLineInfo] input").val(ui.item.TrackPLineInfo);
                        $("[col=TrackCLineYear] input").val(ui.item.TrackCLineYear);
                        $("[col=TrackCLineInfo] input").val(ui.item.TrackCLineInfo);
                    }
                }
            });
        });
});

my loaded grid looks like:

<tr id="1">
    <td col="ISRC" style="width: 116px; " class="editableCell"><input class="editableInput  " type="text"></td>
    <td col="Disc_Number" style="width: 31px; " class="editableCell"><input class="editableInput  " type="text"></td>
    <td col="Track_Number" style="width: 31px; " class="editableCell"><input class="editableInput  " type="text"></td>
    <td col="Track_Name" style="width: 156px; " class="editableCell"><input class="editableInput auto_isrc ui-autocomplete-input" type="text" undefined="" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"></td>
    <td col="ArtistName" style="width: 100px; " class="editableCell"><input class="editableInput auto" type="text" undefined=""></td>
    <td col="Track_Time" style="width: 50px; " class="editableCell"><input class="editableInput undefined" type="text" onkeypress="return isNumberKey(event)" undefined=""></td> 
... </tr>
<tr id="2">...</tr>
    ... etc

now – autocomplete does work, but it applies to every <tr>, but i only need it to apply to the one i’m working on. how do i achieve this?

Answer 1

with a bit of help i resolved it as:

    var pid = $(this).parent().parent().attr('id');

            var srs = "xtras/search_isrc.php";
            $(this).autocomplete({
                source: srs,
                dataType: "json",
                minLength: 2,
                select: function(event, ui) {
                    $("#"+pid+" [col=isrc_id] input").val(ui.item ? ui.item.isrc_ID : "");
....

got parent id, then applied changes to it’s children only