如何在SweetAlert2弹窗中实现jQuery UI Autocomplete功能？

问题根源在于：Autocomplete初始化代码执行时，SweetAlert2的弹窗还未完成渲染，#name输入框尚未加入DOM，导致无法绑定自动完成功能。

正确的做法是借助SweetAlert2的didOpen回调——该回调会在弹窗完全打开并渲染完成后触发，此时再初始化Autocomplete：

Swal.fire({
  title: 'Get Users',
  // 替换转义字符，让HTML结构更清晰
  html: '<input type="text" id="name" class="swal2-input" placeholder="Search name...">',
  showCancelButton: false,
  confirmButtonText: 'Next',
  showLoaderOnConfirm: true,
  // 新增didOpen回调，确保DOM元素已加载完成
  didOpen: () => {
    var availableTags = [
      "John",
      "Jane",
      "Janos",
      "Lisa",
      "Rita"
    ];
    $("#name").autocomplete({
      source: availableTags
    });
  }
}).then((result) => {
  if (result.isConfirmed) {
   Swal.fire('Saved!', '', 'success')
  }
})

关键说明 #

• didOpen回调确保输入框已存在于DOM树中，此时调用autocomplete能成功完成元素绑定
• 移除了原代码中独立的$(function(){})初始化块，避免异步加载导致的时序问题

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