0

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

1 回答 1

1

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

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

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

于 2013-05-24T09:46:17.547 回答