【jquery UI】動的に追加したテキストボックスに、autocompleteを適応したい

Question

タイトルの通り、html()等で動的に追加したテキストボックス要素に対して、
Jquery UIのautocompleteが使用できなくて困っています。
【追記】
最初に存在する#sampleのテキストボックスで値を送った後、
一度empty()して、Jqueryで同じテキストボックスをhtml()で生成しています。
2回目以降からautocompleteが効かなくなるという意味です。(#searchも.searchも効かない）

        //この記述だと動かない 最初からあるテキストは動く
        $("#search").autocomplete({
          source: function(req, resp){
            $.ajax({
                // サジェスト処理
              });
          }

動的に追加されたメソッドに対しては.onを使用するとのことでしたが、下記のように記述してもautocompleteでは動きませんでした。

        //この記述でも動かない
        $(document).on("autocomplete","#search", function() {
          source: function(req, resp){
            $.ajax({
                // サジェスト処理
              });
          }

このようなケースに対して、autocompleteを使用する方法はございますでしょうか。
どなたかアドバイスを頂けると幸いです。よろしくお願いします。

Answer 1

inaさんが書かれている通り、動的に追加したあとに
以下のように定義したfunctionを呼び出してbindしてみては？

var autocompleteInit = function() {
  $("#search").autocomplete({
     source: function(req, resp){
       $.ajax({
         // サジェスト処理
       });
     }
  });
};

他のやり方もあると思いますので参考までに。

Comments

[sanset]

この方法で出来ました。具体例までありがとうございます。

Answer 2

autocompleteはイベントではないので、.onでは無理なんじゃないでしょうか。
動的に要素を追加した後、もしくは追加と同時に実行するのは難しい状況でしょうか？

Comments

[sanset]

ありがとうございます。解決しました。
大変申し訳ないのですが、具体例も出していただいたichamさんをベストアンサーにさせて頂きました。
先に回答頂いたのに申し訳ありません。またよろしくお願いいたします。

Answer 3

質問ですが、後から動的に追加された要素には同一のIDが振られているのですか?
でしたら、動かないと思います。
IDは必ず一意になるようにしなくてはならず、同一のものは許可されていません。
クラスを利用すべきです。

Comments

[sanset]

回答ありがとうございます。
上記の#searchはユニークなものです。
一応クラス(.search)で書き換えてみましたが動きませんでした。