0

我一直在尝试寻找解决方案 1 或 2 天，但无法让它发挥作用..

我有一个 id="items" 的表，每一行都有“item-row”类。我在 articlename 字段上使用了自动完成功能（它是一个发票表）。这很好..现在当我想添加一个新行并触发这些字段的自动完成时，它不起作用..该行不会被添加....

// Get the table object to use for adding a row at the end of the table
var $itemsTable = $('#items');

// Create an Array to for the table row. ** Just to make things a bit easier to read.
var rowTemp = [
    '<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea name="articleName[]" id="articleName"></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea name="articleDescription[]" id="articleDescription"></textarea></td><td><textarea name="articlePrice[]" id="articlePrice" class="cost">0.00</textarea></td><td><textarea name="articleQty[]" id="articleQty" class="qty">0</textarea></td><td><span class="price">0.00</span></td></tr>'
].join('');

// Add row to list and allow user to use autocomplete to find items.
$("#addrow").bind('click',function(){
    var $row = $(rowTemp);

    // save reference to inputs within row
    var $itemCode           = $row.find('#articleName');
    var $itemDesc           = $row.find('#articleDescription');
    var $itemPrice          = $row.find('#articlePrice');
    var $itemQty            = $row.find('#articleQty');

    if ( $('#articleName:last').val() !== '' ) {

        // apply autocomplete widget to newly created row
        $row.find('#articleName').autocomplete({
            source: 'getproducts.php',
            minLength: 1,
            select: function(event, ui) {
                $itemCode.val(ui.item.itemCode);
                $itemDesc.val(ui.item.itemDesc);
                $itemPrice.val(ui.item.itemPrice);

                // Give focus to the next input field to recieve input from user
                $itemQty.focus();

                return false;
            }
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.itemCode + " - " + item.itemDesc + "</a>" )
                .appendTo( ul );
        };
        // Add row after the first row in table
        $('.item-row:last', $itemsTable).after($row);
        $($itemCode).focus();

    } // End if last itemCode input is empty
    return false;
});

A 链接的 id="addrow"

顺便说一句，如果我使用以下代码，它确实会添加一行，但不会自动完成：

$("#addrow").bind('click',function(){


$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea name="articleName[]" id="articleName"></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea name="articleDescription[]" id="articleDescription"></textarea></td><td><textarea name="articlePrice[]" id="articlePrice" class="cost">0.00</textarea></td><td><textarea name="articleQty[]" id="articleQty" class="qty">0</textarea></td><td><span class="price">0.00</span></td></tr>');



if ($(".delete").length > 0) $(".delete").show();
bind();

});

我希望有人能照亮我或指出我正确的方向..非常感谢。

4

2 回答 2

1

当您尝试添加新行时，您将拥有不正确的元素的重复 ID。自动完成将可用于第一个 id。所以也许对你来说做这样的事情会更好：

  1. 您必须修改您的 html 代码以不包含具有相同 id 的多个元素

  2. 尝试.on像这样使用 jquery 函数进行自动完成

    $('#your-table').on('load','.your-new-row-class',function(){ $(this).autocomplete({ // 你的自动完成设置 }); });

于 2012-09-20T04:44:49.333 回答
0

我实际上让它与以下代码一起工作：

$("#addrow").bind('click',function(){

    $(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea name="articleName[]" id="articleName"></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea name="articleDescription[]" id="articleDescription"></textarea></td><td><textarea name="articlePrice[]" id="articlePrice" class="cost">0.00</textarea></td><td><textarea name="articleQty[]" id="articleQty" class="qty">0</textarea></td><td><span class="price">0.00</span></td></tr>');


    $(".item-row:last").find('#articleName').autocomplete({
            source: 'getproducts.php',
            select: function(event, ui) {
                var $itemrow = $(this).closest('tr');
                        // Populate the input fields from the returned values
                        $itemrow.find('#articleName').val(ui.item.articleName);
                        $itemrow.find('#articleDescription').val(ui.item.articleDescription);
                        $itemrow.find('#articlePrice').val(ui.item.articlePrice);

                        // Give focus to the next input field to recieve input from user
                        //$('#articleQty').focus();
                        $itemrow.find("#articleQty:last").focus();

                return false;
          }
        // Format the list menu output of the autocomplete
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.articleName + " - " + item.articleDescription + "</a>" )
                .appendTo( ul );
        };


if ($(".delete").length > 0) $(".delete").show();
bind();

});

这确实有很大帮助：

var $itemrow = $(this).closest('tr');

也许它仍然不是完美的代码，但它对我有用。

感谢您的回答；）

于 2012-09-20T05:23:59.483 回答