2

行を動的に追加したい場合は、すべての行に一意の ID が必要であり、ここでコードが自動提案されます。残念ながら、機能していません。

私は次の結果を持っています

  1. 行を動的に追加します。
  2. 動的に追加されたすべてのテスト ボックスの自動提案。

  3. 動的に追加されたすべての要素の一意の 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?"; };
});

});
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 に答える