Bootstrap模态框中jQueryUI Autocomplete无法鼠标选择的问题求助

问题说明 #

在Bootstrap 5模态框的表单内使用jQuery UI Autocomplete组件时，仅支持通过键盘选择下拉选项，鼠标点击选择操作完全失效。

复现代码 #

HTML代码 #

<div class="container py-3">
    <button type="button" data-bs-toggle="modal" data-bs-target="#myModal" class="btn btn-primary">Open modal</button>
</div>
<!-- Modal popup -->
<div class="modal" tabindex="-1" id="myModal">
    <div class="modal-dialog">
        <form method="post" action="#" id="acModalForm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit form</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h1>Form</h1>
                    <hr>
                    <div class="form-floating">
                        <input type="text" class="form-control" id="acInput" placeholder="Sample autocomplete value" value="">
                        <label for="acInput">Sample autocomplete value</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </form>
    </div>
</div>

JavaScript代码 #

$(function () {
    const sampleData = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ];

    $("#acInput").autocomplete({
        source: sampleData,
        appendTo: "#acModalForm"
    });
});

问题原因 #

核心原因是Bootstrap 5模态框的事件拦截机制：模态框会捕获并阻止外部元素的鼠标事件冒泡，同时jQuery UI Autocomplete下拉菜单的默认挂载位置与层级设置，导致其无法正确响应鼠标点击；此外模态框的tabindex="-1"属性也会干扰焦点与事件的正常传递。

修复方案 #

方案一：调整挂载容器与菜单层级 #

将Autocomplete下拉菜单挂载到模态框内容容器内，并确保其层级高于模态框：

$(function () {
    const sampleData = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ];

    $("#acInput").autocomplete({
        source: sampleData,
        appendTo: "#myModal .modal-content", // 指定挂载到模态框内容容器
        open: function() {
            // 设置下拉菜单层级高于Bootstrap模态框（默认z-index为1050）
            $(".ui-autocomplete").css("z-index", 1060);
        }
    });
});

方案二：阻止事件冒泡到模态框 #

通过事件委托，让模态框忽略对Autocomplete下拉菜单的点击拦截：

// 阻止Autocomplete菜单的点击事件冒泡到模态框
$(document).on("mousedown", ".ui-autocomplete", function(e) {
    e.stopPropagation();
});

该方案可与方案一结合使用，进一步提升稳定性。

方案三：关闭模态框自动焦点捕获（不推荐） #

此方案会影响模态框的无障碍访问特性，仅在前两种方案无效时使用：

$("#myModal").on("shown.bs.modal", function() {
    $(this).off("focusin.modal");
});

验证效果 #

应用任意方案后，Autocomplete下拉菜单即可正常响应鼠标点击选择，同时保留原有的键盘操作功能。

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