使用动态生成的字段自动完成答案

【问题标题】：autocomplete with dynamically generated fields使用动态生成的字段自动完成
【发布时间】：2013-03-18 21:43:42
【问题描述】：

我有一个 jQuery 自动完成功能，非常适合静态命名的文本框。

我的问题是我的文本框是由一个 jquery 脚本生成的，该脚本随后创建了一个增量编号的名称。因此，我需要具有自动完成功能的每个输入框都是不同的。

如何编辑我的自动完成脚本以适用于任何具有特定名称的输入框？

我正在使用 codeigniter 和 jquery 1.7。

我的看法是：

<table class="authors-list">
  <tr><td></td><td>Product</td><td>Qty</td><td>Price/Cube</td><td>Discount</td><td>treated</td></tr>
  <tr>
   <td><a class="deleteRow"> <img src="<?php echo base_url() ?>application/assets/images/no.jpg" /></a></td>
   <td><input type="text" id="product" name="product" /></td>
   <td><input type="text" id="qty" name="qty" /></td>
   <td><input type="text" id="pricepercube" name="pricepercube" /></td>
   <td><input type="text" id="discount" name="discount" /></td>
   <td><input type="text" id="treated" name="treated" /></td>
</tr>
</table>

// 生成附加行的脚本。输入名称附加计数器值

<script type="text/javascript">
var counter = 1;
jQuery("table.authors-list").on('change','input[name^="qty"]',function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr>'+
      ' <td><a class="deleteRow"> <img src="<?php echo base_url() ?>application/assets/images/no.jpg" /></a></td>' +
      ' <td><input type="text" id="product_' +  counter + '" name="product_' +  counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>' +
      ' <td><input type="text" id="qty_' + counter + '" name="qty_' + counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>'+
      ' <td><input type="text" id="pricepercube_' + counter + '" name="pricepercube_' + counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>'+
      ' <td><input type="text" id="discount_' + counter + '" name="discount_' + counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>'+
      ' <td><input type="text" id="treated_   ' + counter + '" name="treated_   ' + counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>'+
      ' </tr>');
    jQuery('table.authors-list').append(newRow);
});

jQuery("table.authors-list").on('click','.deleteRow',function(event){
 if ($(this).parents('table').find('tr').length >  2) { 
    $(this).closest('tr').remove();
 }else{
  alert ('Form must have at least one row')
 }

});
</script>

//自动完成脚本。目前适用于静态创建的输入product

<script type="text/javascript">
      $(function(){
        $("#product").autocomplete({
          source: "get_sku_codes",
          messages: {
          noResults: '',
          results: function() {}
      }       

        });
      });
</script>

如何修改我的自动完成字段以引用正确的输入字段 - 输入字段的名称正确？

我可以这样做：'input[name^="qty"]' 还是使用$this 更好？

如前所述，它适用于静态字段product，但我需要它与动态创建的字段一起使用，这将是：product_1、product_2、product_3 等...请记住我不确定用户将添加多少行。

根据 Beardfist 更新

<script type="text/javascript">
var counter = 1;
jQuery("table.authors-list").on('change','input[name^="qty"]',function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr>'+
      ' <td><a class="deleteRow"> <img src="<?php echo base_url() ?>application/assets/images/no.jpg" /></a></td>' +
      ' <td><input type="text" id="product_' +  counter + '" name="product_' +  counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>' +
      ' <td><input type="text" id="qty_' + counter + '" name="qty_' + counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>'+
      ' <td><input type="text" id="pricepercube_' + counter + '" name="pricepercube_' + counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>'+
      ' <td><input type="text" id="discount_' + counter + '" name="discount_' + counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>'+
      ' <td><input type="text" id="treated_   ' + counter + '" name="treated_   ' + counter + '" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" /></td>'+
      ' </tr>');
    jQuery('table.authors-list').append(newRow);

        $("#product_"+counter).autocomplete({ 
          source: "get_sku_codes",
          messages: {
          noResults: '',
          results: function() {}
      }       

        });

});

jQuery("table.authors-list").on('click','.deleteRow',function(event){
 if ($(this).parents('table').find('tr').length >  2) {  //get number of rows(TR's) in table 
    $(this).closest('tr').remove();
 }else{
  alert ('Form must have at least one row') // alert if only one row left in table
 }

});
</script>

【问题讨论】：

查看文档，似乎没有一种方法可以像委托事件一样委托autocomplete 的附件。我认为您最好的选择是在创建元素时附加它。这样您就知道它当时存在，并且您应该在使用它来创建元素时拥有可用的 id。
感谢 BeardFist，关于如何执行此操作的任何建议？我会在变量 newrow jQuery('table.authors-list').append(newRow); 中执行此操作吗？这是正确的想法还是我离题了？请记住，查找的自动完成源是在我的视图中引用模型（Codeigniter）。再次感谢您的时间和投入。
您可以尝试在.append() 之后添加$("#product_"+counter).autocomplete({...
嗨@Beardfist，抱歉我的回复晚了。我已经用我更新的代码更新了这个问题。这没有正确触发，因为我没有看到开发人员工具的 XHR 请求。所以我的语法不起作用。任何帮助表示赞赏。干杯，

标签： jquery dynamic input autocomplete

【解决方案1】：

我认为在这种情况下您不需要计数器。您应该使用类 (.) 而不是 ID (#) 进行自动完成。

像这样： $(".product").autocomplete({ ...

然后，当您使用 .append() 动态添加新行时，您需要在附加行之后（而不是之前）立即放置自动完成功能，以便每次添加新行时它都可以用于新 DOM。

【讨论】：