javascript - jQuery 自动完成应用于共享相似名称的所有字段

Question

我有一个包含多行的表单。每行都有一个名称以 product 开头的产品列。所以名称是 product1、product2、product3 等等

我有一个自动完成脚本如下:

<script type="text/javascript">
    $(function(){
        $("#product1").autocomplete({ //product is input cell to reference. autocomplete is a jquery function that is being called.
            source: "get_sku_codes",
            messages: {
            noResults: '',
            results: function() {}
            }       
        });
    });
</script> 

这对输入 product1 很有效，但对 product2 无效，因为脚本显然引用了不同的输入。

如何修改我的脚本以在填充任何以 product 开头的单元格时触发？

更新动态内容

<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>'+
      ' </tr>');
    jQuery('table.authors-list').append(newRow);
});
</script>

Dipesh 更新

<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>' +
      ' </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

使用属性以选择器 [name^="value"] 开头

Description: Selects elements that have the specified attribute with a value beginning exactly with a given string.

$('input[name^="product"]').autocomplete({ 

Official Document

对于动态加载

您可以为此使用 .on。

$('input[name^="product"]').on('focus',function(){
   // code for $(this).autoComplete();
});

根据更新后的代码，您可以添加以下代码，以便新添加的 DOM 具有附加的自动完成代码。

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

在append语句后添加上面的代码。