AjaxがロードされたテキストボックスでJquery UIオートコンプリート

Question

<div id='toolbox'> 
    <div class='placeholder'></div> 
</div> 

私はこのテキストボックスをプレースホルダに読み込むためにclickイベントを使用しています。

$('#toolbox .placeholder').load('http://scarlett-angel.com/honours-server/admin_editors/word.php');}); 

が、これはそれ

<div class="honours-container toolbox-widget"> 
    <label>add word</label><input type="text" name="search_word" id="search_word"> 
</div> 

私は以前にDOMがロードされたときに存在していた要素に取り組んでjQueryのUIのオートコンプリートを持っていたにロードされているものです。

$("#word").autocomplete({ 
source: 'http://46.101.8.220/fake-server/word-search.php', 
minLength: 1, 
success: function (data) { 
      response(data.map(function (value) { 
       return { 
        'label': '<li>' + value.Id + '</li>', 
        'value': value.Value 
       }; 
      })); 
     } 
}); 

私は、同じプレースホルダー領域にオプション画面の異なるセグメントを.LOAD、それらの部品が必要とされていないときにそれをクリアすることができることができるようにしたいです。私はおそらく静的なHTMLのすべての部分を作成し、それらを表示と非表示に切り替えようとしています。しかし、誰かがこれのための回避策を知っていたら私は不思議でしたか？

Answer 1

あなたはこのように関数にオートコンプリートを初期化するコードを置くことができます。

function intilalizeAutocomplete(){ 
$("#word").autocomplete({ 
source: 'http://46.101.8.220/fake-server/word-search.php', 
minLength: 1, 
success: function (data) { 
      response(data.map(function (value) { 
       return { 
        'label': '</li>' + value.Id + '</li>', 
        'value': value.Value 
       }; 
      })); 
     } 
}); 
} 

、その後、あなたはAjaxの負荷を使用して、テキストボックスをロードするたびに、このメソッドを呼び出します。

また、テキストボックスIDを渡すだけで、任意のテキストボックスで使用するようにメソッドをパラメータ化することもできます。