点击添加自动完成的行td

Question

所以我试图在我的表中的第二行输入字段中显示autocompete，但它不起作用 我会很感激，即使它不起作用 请帮帮我 所以这是我的autocomplete.js：

 $(".addmore").on('click',function(){
count=$('table tr').length;

var data="<tr><td><input type='checkbox' class='case'/></td><td><span id='snum"+i+"'>"+count+".</span></td>";
data +="<td><input class='form-control' type='text' id='jenisbenang_"+ i +"' name='jenisbenang[]' readonly/></td><td><input class='form-control' type='text' id='warna_"+ i +"' name='warna[]' readonly/></td><td><input class='form-control' type='text' id='lot_"+i+"' name='lot[]'/></td><td><input class='form-control' type='text' id='customer_"+i+"' name='customer[]'/></td><td><input class='form-control' type='text' id='netto_"+i+"' name='netto[]'/></td><td><input class='form-control' type='text' id='box_"+i+"' name='box[]'/></td><td><input class='form-control' type='text' id='cones_"+i+"' name='cones[]'/></td><td><input class='form-control' type='text' id='keterangan_"+i+"' name='keterangan[]'/></td><td class='noborder'><input type='hidden' id='hiddenlot_"+i+"' name='hiddenlot[]' /></td><td class='noborder'><input type='hidden' id='hiddencustomer_"+i+"' name='hiddencustomer[]' /></td></tr>";
$('.table').append(data);
row = i ;
i++;


 $('#lot_'+i).autocomplete({
source: function( request, response ) {
    $.ajax({
        url : 'ajax.php',
        dataType: "json",
        method: 'post',
        data: {
           name_startsWith: request.term,
           type: 'lot',
           row_num : row
        },
         success: function( data ) {
             response( $.map( data, function( item ) {
                var code = item.split("|");
                return {
                    label: code[2],
                    value: code[2],
                    data : item
                }
            }));
        }
    });
},
autoFocus: true,            
minLength: 0,
select: function( event, ui ) {
    var names = ui.item.data.split("|");
    id_arr = $(this).attr('id');
    id = id_arr.split("_");                     
    $('#jenisbenang_'+id[1]).val(names[0]);
    $('#warna_'+id[1]).val(names[1]);
},
open: function() {
    $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
    $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}                           
});
    $('#customer_'+i).autocomplete({
    source: function( request, response ) {
        $.ajax({
            url : 'ajax.php',
            dataType: "json",
            method: 'post',
            data: {
               name_startsWith: request.term,
               type: 'customer',
               row_num : i
            },
             success: function( people ) {
                 response( $.map( people, function( itempeople ) {
                    var code = itempeople.split("|");
                    return {
                        label: code[1],
                        value: code[1],
                        data : itempeople
                    }
                }));
    },
    open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
    },
    close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
    }            
        });
    },
    autoFocus: true,            
    minLength: 0            
  });
});


function select_all() {
    $('input[class=case]:checkbox').each(function(){ 
        if($('input[class=check_all]:checkbox:checked').length == 0){ 
            $(this).prop("checked", false); 
        } else {
            $(this).prop("checked", true); 
        } 
    });
}

function check(){
    obj=$('table tr').find('span');
    $.each( obj, function( key, value ) {
        id=value.id;
        $('#'+id).html(key+1);
    });
}                                       

 $('#customer_1').autocomplete({
    source: function( request, response ) {
        $.ajax({
            url : 'ajax.php',
            dataType: "json",
            method: 'post',
            data: {
               name_startsWith: request.term,
               type: 'customer',
               row_num : 1
            },
             success: function( people ) {
                 response( $.map( people, function( itempeople ) {
                    var code = itempeople.split("|");
                    return {
                        label: code[0],
                        value: code[0],
                        data : itempeople
                    }
                }));
            }
        });
    },
    autoFocus: true,            
    minLength: 0,
    select: function( event, ui ) {
        var names = ui.item.data.split("|");                    
        $('#hiddencustomer_1 ').val(names[1]);
    },
    open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
    },
    close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
    }               
});

这是我的标题，用于放置脚本和css，对于此代码我使用 auto.js＆amp;的jquery-ui.js ：

echo"<link href='css/bootstrap.css' rel='stylesheet'>
<meta charset='utf-8'>
<link rel = 'stylesheet' href='datatables/media/css/jquery.dataTables.css' type='text/css' />
<link rel = 'stylesheet' href='jquery-ui.css'>
<link rel = 'stylesheet' href='jquery-ui.min.css'>
<script type='text/javascript' src='datatables/media/js/jquery.js'></script>
<script type='text/javascript' src='datatables/media/js/jquery.dataTables.js'></script>
<script type='text/javascript' src='datatables/media/js/jquery.dataTables.min.js'></script>
<script src='js/main.js'></script>
<script src='js/jquery-ui.min.js'></script>‌​
<script src='js/auto.js'></script>
<script src='js/bootstrap.min.js'></script>
<meta name='viewport' content='width=device-width, initial-scale=1'>";

这是我的表：

<td><input type='checkbox' class='case'/></td>
                                <td><span id='snum'>1.</span></td>
                                <input class='form-control' type='hidden' id='hiddenlot_1' name='hiddenlot[]' />
                                <input class='form-control' type='hidden' id='hiddencustomer_1' name='hiddencustomer_1[]' />
                                <td><input class='form-control' type='text' id='jenisbenang_1' name='jenisbenang[]' readonly/></td>
                                <td><input class='form-control' type='text' id='warna_1' name='warna[]' readonly/></td>                             
                                <td><input class='form-control' type='text' id='lot_1' name='lot[]'/></td>
                                <td><input class='form-control' type='text' id='customer_1' name='customer[]'/> </td>
                                <td><input class='form-control' type='text' id='netto_1' name='netto[]'/> </td>
                                <td><input class='form-control' type='text' id='box_1' name='box[]'/> </td>
                                <td><input class='form-control' type='text' id='cones_1' name='cones[]'/> </td>
                                <td><input class='form-control' type='text' id='keterangan_1' name='keterangan[]'/> </td>

这是我的页脚

<script src='js/auto.js'></script>
    <script type='text/javascript' src='js/main.js'></script>
    <script type='text/javascript' src='datatables/media/js/jquery.js'></script>
    <script type='text/javascript' src='datatables/media/js/jquery.dataTables.js'></script>
    <script type='text/javascript' src='datatables/media/js/jquery.dataTables.min.js'></script>
    <link href='datatables/media/css/jquery.dataTables.css' rel='stylesheet' type='text/css'/>";

所以我的错误一直显示未捕获TypeError：$（...）。autocomplete不是函数，第二行输入字段不能显示自动完成列表

Answer 1

只有在加载页面时才会运行自动完成功能。您没有调用自动填充功能。请将其保留在.click()，

中

$(".addmore").on('click',function(){
count=$('table tr').length;

var data="<tr><td><input type='checkbox' class='case'/></td><td><span id='snum"+i+"'>"+count+".</span></td>";
data +="<td><input class='form-control' type='text' id='jenisbenang_"+ i +"' name='jenisbenang[]' readonly/></td><td><input class='form-control' type='text' id='warna_"+ i +"' name='warna[]' readonly/></td><td><input class='form-control' type='text' id='lot_"+i+"' name='lot[]'/></td><td><input class='form-control' type='text' id='customer_"+i+"' name='customer[]'/></td><td><input class='form-control' type='text' id='netto_"+i+"' name='netto[]'/></td><td><input class='form-control' type='text' id='box_"+i+"' name='box[]'/></td><td><input class='form-control' type='text' id='cones_"+i+"' name='cones[]'/></td><td><input class='form-control' type='text' id='keterangan_"+i+"' name='keterangan[]'/></td><td class='noborder'><input type='hidden' id='hiddenlot_"+i+"' name='hiddenlot[]' /></td><td class='noborder'><input type='hidden' id='hiddencustomer_"+i+"' name='hiddencustomer[]' /></td></tr>";
$('.table').append(data);
row = i ;
i++;


 $('#lot_'+i).autocomplete({
source: function( request, response ) {
    $.ajax({
        url : 'ajax.php',
        dataType: "json",
        method: 'post',
        data: {
           name_startsWith: request.term,
           type: 'lot',
           row_num : row
        },
         success: function( data ) {
             response( $.map( data, function( item ) {
                var code = item.split("|");
                return {
                    label: code[2],
                    value: code[2],
                    data : item
                }
            }));
        }
    });
},
autoFocus: true,            
minLength: 0,
select: function( event, ui ) {
    var names = ui.item.data.split("|");
    id_arr = $(this).attr('id');
    id = id_arr.split("_");                     
    $('#jenisbenang_'+id[1]).val(names[0]);
    $('#warna_'+id[1]).val(names[1]);
},
open: function() {
    $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
    $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}                           
});
});