AngularJS中Bootstrap模态框内jQuery autocomplete搜索失效，求原因及解决方法

这个问题我之前也碰到过，其实核心原因是Bootstrap模态框的焦点拦截机制在干扰jQuery Autocomplete的正常工作，具体来说：

问题原因 #

• Bootstrap模态框默认带有tabindex="-1"属性，这会让模态框本身优先获取焦点，导致输入框的键盘输入事件被模态框拦截，Autocomplete无法接收到输入变化来触发搜索逻辑。
• Bootstrap的模态框内置了focusin事件处理，会强制将焦点保持在模态框内的元素上，但这个逻辑可能打乱了Autocomplete输入框的事件流，使得输入内容无法被正确识别。

解决方案 #

这里给你几个实用的解决办法，按优先级尝试：

1. 禁用模态框的强制聚焦行为 #

这是最直接的方法，在模态框打开后，移除它的focusin.modal事件绑定，这样输入框就能正常接收键盘事件了：

// 在AngularJS控制器中，模态框显示后执行
angular.element('#yourModalId').off('focusin.modal');

或者在初始化模态框时直接关闭自动聚焦选项：

angular.element('#yourModalId').modal({
  backdrop: 'static',
  keyboard: true,
  focus: false // 禁用模态框自动聚焦
});

2. 手动触发Autocomplete搜索 #

如果上面的方法没生效，可以手动监听输入框的键盘事件，主动调用Autocomplete的搜索方法：

// 给你的Autocomplete输入框绑定keyup事件
angular.element('#autocompleteInput').on('keyup', function() {
  $(this).autocomplete('search', $(this).val());
});

3. 确保Autocomplete下拉框显示在模态框上方（可选） #

有时候虽然搜索功能正常，但下拉框会被模态框遮挡，这时候可以调整z-index：

.ui-autocomplete {
  z-index: 1051 !important; /* Bootstrap模态框的z-index默认是1050，设高一级 */
}

内容的提问来源于stack exchange，提问作者Muttu B C