動的に生成されたテキストボックスのjquery auto complete

Question

私はjqueryを初めて使用しています。オートコンプリートで動的にテキストボックスを生成する必要があるWebページで作業しています。

いくつかの静的コンテンツで$("#some").autocomplete(data);をテストしたところ、完全に機能しました。

しかし、動的に生成されたテキストボックスで同じテクニックを試してみると、うまくいきません。私はウル助けを借りてこれを行っています

$(function() { 

    $("#button_newproduct").click(function(){ 
    $("#products_table > tbody").append(
     "<tr><td><input type='text'name='td_products["+counter+"]'/></td></tr>"); 
    }); 
    var data = "Core celectors cttributes craversing canipulation CSS cvents cffects cjax ctilities".split(" "); 
    $('input[name^=td_products]').autocomplete(data); 
}); 

おかげでみんなを次のように

私のコードが見えます。

今、別の問題です。私はここに

DwrService.populateProducts(someFunc); 
function someFunc(result){ 
    autoProducts=result; 
    input.autocomplete(result); 
} 

以下DWRのcall.asで配列（オートコンプリートへの入力）をロードしています問題は、配列を取得するためにDBにDWR呼び出しを行う毎回です！

DWRから配列をグローバル変数に格納する方法はありますか？

よろしく

Answer 1

主な問題は、あなたがクリックハンドラの外でオートコンプリートを呼び出していることです。したがって、ボタンがクリックされたときではなく、ページが読み込まれたときにオートコンプリートが設定されます。

は読むためにコードを変更し、これを解決するには、次の

$(function() { 

    $("#button_newproduct").click(function() { 

     var newItem = $("<tr><td><input type='text'name='td_products["+counter+"]'/></td></tr>"); 

     $("#products_table > tbody").append(newItem); 

     var data = "Core celectors cttributes craversing canipulation CSS cvents cffects cjax ctilities".split(" "); 
     newItem.find('input').autocomplete(data); 

    }); 
}); 

は今自動補完を開始時に、むしろ何度も、それぞれの新しいアイテムに設定されています。

Answer 2

いくつかの考え：

• カウンタ初期化されますか？
• は何も一致するからあなたstartsWith属性フィルタを妨げている可能性のあることを、 「タイプ」と、あなたの 入力タグの「名前」の属性、<input type='text' name='td_products... >の間にスペースを残してみてください。

Answer 3

#button_newproductをクリックしたときに新しい入力を追加していますが、機能内でクリックの外側にオートコンプリートを1回追加するだけです。

チェックjqueryのlive

Answer 4

あなたはそれを追加すると、各要素にオートコンプリートハンドラを追加する必要があります。ドキュメントの読み込み時にそれを適用するときに存在しない要素は、それ以外の場合は適用されません。また、行を作成して別々に入力する方がよいでしょう。これを行うことで、新しく作成された入力への参照を使用し、オートコンプリート・プラグインでそれを使用することができます。

$(function() { 

    $("#button_newproduct").click(function(){ 
     var input = $("<input type='text' name='td_products["+counter+"]' />"); 
     var row = $('<tr />').append($('<td />').append(input)); 
     $("#products_table > tbody").append(row); 
     var data = "Core celectors cttributes craversing canipulation CSS cvents cffects cjax ctilities".split(" "); 
     input.autocomplete(data); 

    }); 
}); 

Answer 5

最も簡単な方法は、使用することです。

$(".some").autocomplete({source: data}); 

新しい要素を生成するJavaScript関数内。