Question

我有一个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>

Answer 1

我认为在这种情况下你不需要计数器。您应该使用类（。）而不是ID（＃）作为自动完成。

像这样： $（“。product”）。autocomplete（{...

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

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

1 个答案: