javascript - 同じページに複数のオートコンプリート フィールドがある場合の問題

Question

jQuery v1.8.3 と jQuery UI v1.9.2 を使用しています。AutocompleteウィジェットとDialogウィジェットを次のように実装しました。

$("#A_autocomplete").autocomplete({
  select   : function(event, ui) {
    event.preventDefault();

    if ( condition ) {
      // Open a modal dialog window
      $("#dialog_window").dialog('open');
    } else {
      // Populate the autocomplete input with the label (not the value)
      $(this).val(ui.item.label);
    }
  },
  ...
});

上記のコードでconditionは、いつfalseオートコンプリート#A_autocompleteが期待どおりに機能しますか。次に、ダイアログが開かconditionれtrue、AJAX 要求が実行されて、その本文コンテンツに応答 HTML データが入力されます。その HTML データには、idofを持つ別のオートコンプリート フィールドが含まれて#B_autocompleteおり、このオートコンプリート フィールドでさえ期待どおりに機能します。

ただし、ダイアログ ウィンドウが閉じられると、オートコンプリート#A_autocompleteが正常に機能しなくなります。$(this).val(ui.item.label)

どうすれば問題を解決できますか?

---

ダイアログを開いた後、DOM 本体に2 つのオートコンプリート メニューが表示されることに注意してください。

# Generated "by" / "for" the #A_autocomplete
<ul class="ui-autocomplete" id="ui-id-1">
  <li>...</li>
</ul>

# Generated "by" / "for" the #B_autocomplete after the dialog is opened
<ul class="ui-autocomplete" id="ui-id-11">
  <li>...</li>
</ul>

問題はそれに依存する可能性があると考えています...