Question

我在文本框中添加了自动完成功能，但是我单击“添加”按钮，然后添加了新行，但自动完成功能无效。下面是我的代码。

$(function() {
$("#skills").autocomplete({
source: 'textbox_auto_complete.php'
});
});

//Add Script

$('#product_table').DataTable();
$(document).on("click","#addRow",function(){ 
var table = $('#product_table').DataTable();
table.row.add(['','','']).draw();
});




<table id="product_table" class="display" cellspacing="0" width="50%">
<thead>
<tr>
<th align="Center">Product Name</th>
<th align="Center">Quantity</th>
<th align="Center">Click Me</th>
</tr>
</thead>    
<tbody>
<tr>
<td><input class="product_text skills" type="text" placeholder="Type Product Name" name="skills" id="skills" required="">
</td>
<span id="product_list"></span> 
<td><input class="product_text" type="text" placeholder="Quantity" name="Quantity" required=""></td>
<td><input class="product_text" type="button" id="addRow" name="addRow" value="Add"></td>
</tr>
</tbody>
</table>

当我运行代码第一个文本字段正确运行自动完成但动态行不起作用，请找到问题所在。提前谢谢。

Answer 1

您正在使用id作为选择器＆amp; id是独一无二的。整页中应该只有一个id。所以它不适用于除了第一个以外具有相同id的其他元素。如果您的输入具有相同的class，则可以将其用作class选择器：

$(function() {
  $('#product_table').find('.skills').autocomplete({ 
     source: 'textbox_auto_complete.php'
  });
});

自动完成功能在使用数据表的动态添加行中不起作用

1 个答案: