Jquery-UI AutoComplete在BootBox Modal中无法正常工作

问题根源 #

你碰到的这个情况太常见了！核心问题出在DOM加载时机上：页面初始化时，$("#myModalGeneral")里的文本框还只是藏在页面模板里的静态代码，并没有被真正插入到活跃的DOM结构中。而你原本写的自动完成初始化代码是在页面加载时就执行了，这时候根本找不到模态框里的文本框元素，自然就没效果。但普通页面里的元素从一开始就在DOM里，所以能正常工作。

解决方案：在模态框显示后初始化自动完成 #

BootBox提供了onShown回调函数，这个函数会在模态框完全渲染、内容已经插入到DOM之后才触发，这时候再初始化自动完成就没问题了。

修改后的脚本示例 #

$("#bootbox-options-general").on('click', function() {
  bootbox.dialog({
    message: $("#myModalGeneral").html(),
    title: "Edit Job General",
    className: "modal-darkorange",
    onShown: function() {
      // 在这里初始化自动完成，确保元素已存在于DOM
      var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
      // 替换成你模态框里文本框的实际选择器，比如#job-title-input
      $("#job-title-input").autocomplete({
        source: availableTags
      });
    }
  });
});

额外注意事项 #

• 务必确认选择器（比如#job-title-input）和模态框里文本框的ID完全匹配，别写错了。
• 如果担心多次点击打开模态框导致重复绑定，可以先销毁旧的自动完成实例再初始化：

  $("#job-title-input").autocomplete("destroy").autocomplete({
    source: availableTags
  });
  

• 检查jQuery UI的autocomplete脚本是否正确引入，且版本和你用的jQuery兼容。

内容的提问来源于stack exchange，提问作者aboo mon