jQuery UI Autocomplete 在 Bootstrap Modal 中不顯示？z-index 與焦點陷阱雙重修復

Bootstrap Modal (z-index: 1050) 彈出後，Autocomplete 下拉菜單 (默認 z-index: 1) 被遮擋，或因焦點管理失效無法彈出。雙管齊下即可解決。

修復一：提升 Autocomplete 菜單 z-index

$("#ingredientName").autocomplete({
    source: availableTags,
    appendTo: "#myModal",          // 關鍵：掛載到 Modal 內部，隨 Modal 定位
    position: { my: "left top", at: "left bottom", collision: "flip" }
});

// CSS 強制提層
.ui-autocomplete { z-index: 1100 !important; }

修復二：確保輸入框獲得焦點

Bootstrap Modal 顯示動畫結束後，手動聚焦：

$('#myModal').on('shown.bs.modal', function() {
    $("#ingredientName").trigger('focus');
});

根本原因

• 層級倒置：Autocomplete 菜單生成在 <body> 末尾，z-index 為 1，遠低於 Modal 遮罩層 (1040) 與對話框 (1050)。
• 焦點陷阱：Modal 會捕獲焦點，若輸入框未在 Modal 內正確聚焦，鍵盤事件不觸發 autocomplete。

完整初始化代碼

$(function() {
    var availableTags = [...];
    $("#ingredientName").autocomplete({
        source: availableTags,
        appendTo: "#addIngredient", // Modal 內的表單容器 ID
        minLength: 1
    });

    $('#buttonAddIngredient').click(function() {
        bootbox.dialog({
            message: $("#addIngredient").html(),
            title: "添加配料",
            onEscape: true,
            backdrop: true
        });
        // bootbox 基於 Bootstrap Modal，同理需聚焦
        setTimeout(() => $("#ingredientName").trigger('focus'), 300);
    });
});

加上 appendTo 與 z-index，Modal 內自動完成輕鬆實現。