1

我有一个多行的表格。每行都有一个名称为开头的产品列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>

迪佩什更新

<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>
4

4 回答 4

2

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

描述：选择具有指定属性的元素，其值恰好以给定字符串开头。

$('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在语句后添加上面的代码。

于 2013-03-19T11:07:25.107 回答
2

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

$(".className").autocomplete({

或者

$("input[name^='product']").autocomplete({
于 2013-03-19T11:08:45.660 回答
1

什么是身份证#product1？div? a标签？

比如说，如果它是 a div，则遍历所有元素：

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

.(container wrapper)div 或 p 的类名在哪里'products'.. 自然地，您会删除[]..only 以进行演示并使整个事情变得有意义。

于 2013-03-19T11:12:04.780 回答
0

尝试多重选择器

$("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 
});

那应该可以解决问题...

于 2013-03-19T11:07:57.293 回答