Jquery ui自动完成未填充

Jquery ui autocomplete not fill

本文关键字：填充 ui Jquery      更新时间：2023-09-26

我是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>

有一点是肯定的，在第一个自动完成的选择事件处理程序中，您有一个错误：

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);
            }

解决这个问题，看看你的问题是否消失了。

我通过在顶部添加一个新的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++;
});
相关文章：