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

Question

我有一个有几行的表单。每行有一个product列，名称以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:选择具有指定属性且值正好以给定字符串开头的元素。

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

Official Document

For Dynamic loaded

您可以使用.on。

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

根据更新的代码，你可以添加下面的代码，所以新添加的DOM有自动完成的代码附加。

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

在append语句后添加以上代码

Answer 2

尝试对所有这些元素应用相同的类

$(".className").autocomplete({ 

或

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

Answer 3

id #product1是什么?div吗?a标签?

例如，如果是div，循环遍历所有元素:

$('[.(container wrapper) > div]').each(function () {});

其中.(container wrapper)是div或p或其他包含'products'的类名。当然，你会删除[] ..只是为了演示和让整个事情有意义。

Answer 4

try multi selector

$("input[id^='product']").autocomplete({  //if you have ID
    .....
$("input[name^='product']").autocomplete({  //if you have name
    .....

创建一个函数

 function callAutocomplete(obj)
 {
      $('#'+obj).autocomplete{
                //your autocompletecode 
              }; 
 }

在

行之后调用这个函数

.....
jQuery('table.authors-list').append(newRow);
callAutocomplete("product" +  counter);

和

$(function(){
      callAutocomplete("product1"); //remove other code that u mentioned above 
});