在同一页面上的多个自动填充字段出现问题

时间:2012-12-05 13:24:35

标签: javascript jquery jquery-ui autocomplete dialog

我正在使用jQuery v1.8.3和jQuery UI v1.9.2。我用这种方式实现了AutocompleteDialog小部件:

$("#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);
    }
  },
  ...
});

在上面的代码中,当conditionfalse时,自动填充#A_autocomplete按预期工作。当conditiontrue时,将打开对话框并执行AJAX请求,以便使用响应HTML数据填充正文内容。该HTML数据包含另一个id #B_autocomplete的自动填充字段,甚至此自动填充字段也可按预期工作。

然而,在关闭对话框窗口后,自动完成#A_autocomplete 不再正常工作:$(this).val(ui.item.label)似乎被触发了。

我该如何解决这个问题?


我注意到,打开对话框后,在DOM正文中出现两个自动完成菜单:

# 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>

我认为问题可能取决于......

0 个答案:

没有答案