SPA中jQuery autocomplete（Ajax）失效原因及解决办法

以下代码可正常运行：

JavaScript 代码 #

$("#Term").autocomplete({
  source: '/ws/words.json?lang=en'
});

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css" />
<link href="https://code.jquery.com/ui/1.14.0/themes/redmond/jquery-ui.css" />
<div id="myform">
  <label for="Term">Term: </label>
  <input id="Term">
</div>

但在单页应用（SPA）场景下，移除<div>原有内容并从服务器动态加载包含<input id="Term">的新内容后，即便将autocomplete脚本随新<div>内容一同发送，该自动补全功能仍无法正常工作。请问此问题的成因是什么？该如何解决？

• 原来的$("#Term").autocomplete()代码，只会给执行代码时已经存在于页面上的#Term输入框绑定自动补全功能。
• SPA里动态加载新内容时，新的#Term输入框是在这段脚本跑完之后才被插到页面里的，脚本不会自动回头给新元素再绑定一次。
• 就算把脚本和新内容一起发过来，大概率脚本执行的时候新元素还没插入DOM，找不到元素自然初始化失败；就算重复执行，也可能因为之前的残留状态导致冲突，但核心问题还是元素出现的时机和脚本执行时机不匹配。

方法1：动态加载完成后手动初始化 #

在新内容成功插入DOM的回调里，手动调用autocomplete的初始化代码：

// 示例：用AJAX加载新内容
$.get('/your-api-path/new-content', function(htmlContent) {
  // 把新内容插入到容器里
  $('#myform').html(htmlContent);
  // 新输入框已经存在了，现在初始化自动补全
  $("#Term").autocomplete({
    source: '/ws/words.json?lang=en'
  });
});

方法2：用DOM监听自动触发初始化 #

用MutationObserver监听容器的变化，一旦发现新的#Term输入框被插入，就自动初始化：

// 创建监听实例
const domObserver = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // 检查当前变化的容器里有没有#Term元素，且还没初始化过autocomplete
    const targetInput = $(mutation.target).find('#Term');
    if (targetInput.length && !targetInput.data('ui-autocomplete')) {
      targetInput.autocomplete({
        source: '/ws/words.json?lang=en'
      });
    }
  });
});

// 开始监听#myform容器的子元素变化
domObserver.observe(document.getElementById('myform'), {
  childList: true,
  subtree: true
});

方法3：封装初始化函数，按需调用 #

把初始化逻辑封装成独立函数，不管是页面初始加载还是动态加载内容后，直接调用就行：

// 封装初始化函数
function setupAutocomplete() {
  $("#Term").autocomplete({
    source: '/ws/words.json?lang=en'
  });
}

// 页面第一次加载时初始化
setupAutocomplete();

// 动态加载内容后调用
$('#myform').load('/your-api-path/new-content', function() {
  setupAutocomplete();
});

内容的提问来源于stack exchange，提问作者Kris Van Bruwaene