Bootstrap模态框内输入框实现jQuery自动补全功能问题

我明白你想要实现的效果：点击#add按钮打开Bootstrap模态框后，让模态框里的#invoice_name输入框拥有jQuery UI自动补全功能。看你贴的代码，主要有几个需要调整的地方，我帮你修正并解释下：

问题分析 #

• 你把shown.bs.modal事件绑定放在了#add的点击事件内部，这样每次点击按钮都会重复绑定这个事件，可能导致自动补全被多次初始化，出现异常。
• keyup事件里的验证逻辑没写完，我帮你补全。
• 最好确保自动补全只初始化一次，或者每次模态框显示时重新初始化（但要先销毁之前的实例）。

修正后的完整代码 #

// 把模态框的显示逻辑和事件绑定分开，避免重复绑定事件
$("#add").on("click", function () {
  const selector = $("#addModal");
  // 重置表单和错误样式
  selector.find(".is-invalid").removeClass("is-invalid");
  selector.find(".error-message").remove();
  selector.find("form").trigger("reset");
  selector.modal("show");
});

// 监听模态框完全显示的事件，在这里初始化自动补全
$("#addModal").on("shown.bs.modal", function () {
  const $invoiceName = $("#invoice_name");
  // 先销毁已有的自动补全实例，避免重复初始化导致的冲突
  if ($invoiceName.data("ui-autocomplete")) {
    $invoiceName.autocomplete("destroy");
  }

  const validOptions = ["Bold", "Normal", "Default", "Banana", "Mango"];
  let previousValue = "";

  $invoiceName.autocomplete({
    autoFocus: true,
    source: validOptions,
    // 可选：选中选项后的回调，记录选中值
    select: function(event, ui) {
      previousValue = ui.item.value;
    }
  }).keyup(function () {
    const currentValue = $(this).val();
    let isValid = false;
    // 检查输入值是否匹配有效选项（不区分大小写）
    for (let i = 0; i < validOptions.length; i++) {
      if (validOptions[i].toLowerCase().includes(currentValue.toLowerCase())) {
        isValid = true;
        break;
      }
    }
    // 根据验证结果更新样式和错误提示
    if (!isValid && currentValue !== "") {
      $(this).addClass("is-invalid");
      // 避免重复添加错误提示
      if ($(this).siblings(".error-message").length === 0) {
        $(this).after('<div class="error-message text-danger">请输入有效的选项</div>');
      }
    } else {
      $(this).removeClass("is-invalid");
      $(this).siblings(".error-message").remove();
      previousValue = currentValue;
    }
  });
});

关键注意事项 #

• 事件绑定位置：把shown.bs.modal事件绑定放在#add点击事件外面，这样只会绑定一次，避免重复触发初始化逻辑。
• 销毁旧实例：每次模态框显示时，先销毁之前的自动补全实例，再重新初始化，防止多次绑定导致的功能异常。
• 模态框显示后初始化：必须在shown.bs.modal事件里初始化自动补全，因为模态框刚触发show时，输入框可能还没完全渲染到DOM中，此时初始化可能无效。
• 验证逻辑匹配：补全的keyup验证逻辑和你代码里的is-invalid、error-message类完全对应，保持样式统一。

这样调整后，应该就能正常实现你想要的自动补全功能啦！

备注：内容来源于stack exchange，提问作者abu abu