2

I want to add rows dynamically all rows must have unique id and auto suggest here my code. Unfortunately its not working.

i have following results

  1. Dynamically add rows.
  2. Autosuggest for all test box dynamically added.

  3. unique id for all dynamically added elements.

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

});
4

2 回答 2

1

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

$('.CLASSNAME).autocomplete({ });

代替

$('#itemCode_1').autocomplete({ });

为动态创建的元素提供以下代码以使其正常工作。

$('.CLASSNAME').live('keydown.autocomplete', function() {

       // Write your code to initiate the autocomplete

});

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

于 2012-10-16T06:39:59.167 回答
0 
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>
于 2012-10-16T07:04:37.063 回答