jquery在多个字段+网格上自动完成

时间:2012-03-16 17:06:31

标签: jquery autocomplete grid

借助stackoverflow资源,我设法在多个字段上自动完成:

    $(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);
                    }
                }
            });
        });
});

我加载的网格如下:

<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

现在 - 自动填充确实有效,但它适用于每个<tr>,但我只需要将它应用于我正在处理的那个。我怎么做到这一点?

2 个答案:

答案 0 :(得分:2)

通过一些帮助我解决了它:

    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 : "");
....

获得父ID,然后仅对其子项应用更改

答案 1 :(得分:0)

我发现了问题。使用“name”作为键会导致jquery失败。这有效:

$("#txtApplicationName").autocomplete({
            source: "ApplicationProcess.php",
            minLength: 2,
            select: function (event, ui) {
                alert(ui.item.id);
                alert(ui.item.value);
            }
        });

这是从PHP发出的:

[{"id":1,"value":"Generate Ideas"},{"id":2,"value":"Define Products"},{"id":3,"value":"Plan Production"}]