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

それらすべての要素に同じクラスを適用してみてください

$(".className").autocomplete({

また

$("input[name^='product']").autocomplete({
于 2013-03-19T11:08:45.660 に答える
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 に答える
1

id#product1は何ですか？div? a鬼ごっこ？

それが の場合、divすべての要素をループします。

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

where.(container wrapper)は div または p またはあなたを囲むもののクラス名です..当然、デモンストレーションと全体が意味をなすためだけに..を'products'削除します。[]

于 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 に答える