Question

我是JQuery和jQuery UI的新手。

我在带有动态行的表中使用autocomplete和远程json 问题是：一切正常，但由于某些原因，输入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事件处理程序中，你有一个错误：

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;解决了问题。现在我用：

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

问题是变量i

谢谢大家的帮助

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

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

Jquery ui自动完成不填

2 个答案: