jQuery UI自動完成未填充

Question

我是JQuery和jQuery UI的新手。

我在具有動態行的表中對遠程json使用autocomplete 。
問題是：一切正常，但由於某些原因，輸入code未填寫。
奇怪的是，如果我在選擇區域中對#code0或#code1進行硬編碼，則可以正常工作。
但是似乎#code+i在select中無法識別。 另一個奇怪的事情是$("#product"+i)作品。

有人可以幫助JS初學者嗎？

$(document).ready(function(){
    var i=0;
    $("#add_row").click(function(){
        $('#addr'+i).html("<td>"+ (i+1) +"<\/td><td><input id='product"+i+"' name='product"+i+"' type='text' placeholder='Digita il codice o il nome del prodotto' class='form-control input-md'  /> <\/td><td><input id='code"+i+"'  name='code"+i+"' type='text' placeholder='Codice'  class='form-control' readonly='readonly'><\/td>");
        $('#tab_logic').append('<tr id="addr'+(i+1)+'"><\/tr>');
        $("#product"+i).autocomplete({
            source: function( request, response ) {
            $.ajax({
                url: "productsearch.php",
                dataType: "json",
                data: {term: request.term},
                success: function(data) {
                            response($.map(data, function(item) {
                            return {
                                label: item.text,
                                id: item.id,
                                code: item.id
                                };
                        }));
                    }
                });
            },
            minLength: 2,
            select: function(event, ui) {
                var codice="$code"+i;
                $('#codice').val(ui.item.id);
            }
        });

      i++;
    });
    $("#delete_row").click(function(){
        if(i>1){
            $("#addr"+(i-1)).html('');
            i--;
        }
    });

    $("#product"+i).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "productsearch.php",
                dataType: "json",
                data: {term: request.term},
                success: function(data) {
                            response($.map(data, function(item) {
                            return {
                                label: item.text,
                                id: item.id,
                                code: item.id
                                };
                        }));
                    }
                });
            },
            minLength: 2,
            select: function(event, ui) {
                $("#code"+i).val(ui.item.id);
            }
        });
        i++;
    });
});

<tbody>
    <tr id='addr0'>
        <td>1</td>
        <td><input id="product0" type="text" name='product0' placeholder='Digita il codice o il nome del prodotto' class="form-control"></td>
        <td><input id="code0" type="text" name='code0' placeholder='Codice' class="form-control" readonly="readonly"></td>
    </tr>

    <tr id='addr1'>
</tr>

Answer 1

可以肯定的是，在第一個自動完成功能的選擇事件處理程序中，您有一個錯誤：

select: function(event, ui) {
                var codice="$code"+i;
                $('#codice').val(ui.item.id);
            }

您為jquery選擇器創建一個變量，然后不使用它。 您無法使用此功能更新ID為“ code” + i的輸入值。 相反，它必須是：

select: function(event, ui) {
                var codice="#code"+i;
                $(codice).val(ui.item.id);
            }

解決該問題，看看問題是否消失。

Answer 2

我已經通過添加新的var count=0;解決了var count=0; 在頂部。 現在我使用：

$("[id^=code]:eq( " + count + " ) ").val(ui.item.id);

問題是變量i

謝謝大家的幫助

            select: function(event, ui) {
                $("[id^=code]:eq( " + count + " ) ").val(ui.item.id);
                 }

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