Question

我想动态添加行，所有行必须具有唯一ID，并在此自动建议我的代码。不幸的是它不起作用。

我有以下结果

动态添加行。
动态添加所有测试框的自动提示。

所有动态添加元素的唯一ID。

$(document).ready(function()
{
var currentItem = 1;

$('#itemCode_1').autocomplete({
source: 'data/item-data.php',
minLength: 1,
select: function(event, ui) {
    var $itemrow = $(this).closest('tr');

            $itemrow.find('#itemCode_1').val(ui.item.itemCode);
            $itemrow.find('#itemDesc_1').val(ui.item.itemDesc);
            $itemrow.find('#itemPrice_1').val(ui.item.itemPrice);


            $('#itemQty_1').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 );
};



$('#addRow').click(function(){
    currentItem++;
    var strToAdd = '<tr class="item-row"><td></td><td><input name="itemCode[]" value="" class="tInput" id="itemCode_'+currentItem+'" tabindex="1"/> </td><td><input name="itemDesc[]" value="" class="tInput" id="itemDesc_'+currentItem+'"  readonly="readonly" /></td><td><input name="itemQty[]" value="" class="tInput" id="itemQty_'+currentItem+'" onChange="calc('+currentItem+')" tabindex="2"/></td><td><input name="itemPrice[]" value="" class="tInput" id="itemPrice_'+currentItem+'" onChange="calc('+currentItem+')"/> </td><td> <input type="text" name="sub_total" id="sub_total_'+currentItem+'"></td></tr>';

    $('#itemsTable').append(strToAdd);



});
var bindfield=$('itemCode_'+currentItem+'');
    var itemdes=$('#itemDesc_'+currentItem+'');
    var itempr=$('#itemPrice_'+currentItem+'');
    var itemqty=$('#itemQty_'+currentItem+'');
bindfield.each(function(){
    $(this).autocomplete({
    source: 'data/item-data.php',
    minLength: 1,
    select: function( event, ui ) {             
         var $itemrow = $(this).closest('tr');

            $itemrow.find(bindfield).val(ui.item.itemCode);
            $itemrow.find(itemdes).val(ui.item.itemDesc);
            $itemrow.find(itempr).val(ui.item.itemPrice);


            $(itemqty).focus();

    return false;
    }
});
    })
$('#itemCode').focus(function(){
window.onbeforeunload = function(){ return "You haven't saved your data.  Are you sure you want to leave this page without saving first?"; };
});

});

Answer 1

你可以给出类名，而不是给出ID，因为自动完成适用于具有指定类名的所有元素。在上面的代码中你可以给出

$（'。CLASSNAME）.autocomplete（{}）;

而不是

$（'＃itemCode_1'）。autocomplete（{}）;

为动态创建的元素提供以下代码。

$（'。CLASSNAME'）。live（'keydown.autocomplete'，function（）{

       // Write your code to initiate the autocomplete

}）;

为动态创建的元素创建相同的类名... 希望这会起作用试试这个...

Answer 2

jQuery(document).ready(function($){
    var counter =2;
    var count=2;
    $("#addmember").click(function () {     
        $('#member').append('<input type="text" name="member' +counter+ '" id="member' + counter + '">');
        counter++;
        jQuery("#member" +count+ "").autocomplete('Your Url', {
            multiple: false,
            matchContains: true,
            width: 180,
            selectFirst: true,
        });
        jQuery("#member" +count+ "").result(function(event, data, formatted) {

            count++;
            }
        });
    });
});

这是在标题部分和正文

中

<input name="member1" id="member1" type="text" />
<div id="member"></div>

自动完成功能不适用于动态创建的行

2 个答案: