jQuery UI Autocomplete克隆搜索框下拉列表不显示求助

我帮你梳理下这个问题的核心原因和解决方案，咱们一步步来搞定：

问题根源分析 #

1. 事件绑定与插件实例冲突：你用了clone(true)复制元素，它只能复制原生DOM事件，但jQuery UI的Autocomplete是通过插件方式绑定的，克隆后的元素并没有生成新的Autocomplete实例，反而可能复用原元素的实例，导致绑定混乱。
2. 选择器语法错误：代码里$("cloned_terms_" + add_count + " input")少了类选择器的点号，应该是$(".cloned_terms_" + add_count + " input")，这个错误直接导致后续的清空值、添加类等操作完全失效，影响Autocomplete的初始化。
3. 下拉框层级/容器遮挡：appendTo选项未正确指定时，下拉框可能被父容器的overflow:hidden截断，或者z-index不足被其他元素覆盖，导致控制台可见但用户看不到。

修正后的代码方案 #

1. 调整克隆与初始化流程

先克隆元素（不克隆事件），设置完属性后单独调用setAutocomplete绑定新元素：

// 假设add_count和search_input是已定义的递增变量
// 用clone(false)避免复制旧的Autocomplete事件实例
var newSearchInput = $("#search_input").clone(false)
    .addClass("cloned_terms_" + add_count)
    .attr("id", "search_input_" + search_input)
    .val('') // 清空输入框内容
    .removeClass("search_input_0")
    .addClass("search_input_" + search_input)
    .attr("data-id", search_input)
    .appendTo("#clone");

// 给新输入框单独初始化Autocomplete
setAutocomplete(source, "#search_input_" + search_input);

2. 优化setAutocomplete函数

明确指定appendTo为当前输入框的父容器，同时确保父容器拥有ui-front类解决层级问题：

function setAutocomplete(source, autocomplete_selector) {
    console.log("autocomplete_selector: " + autocomplete_selector);
    const $input = $(autocomplete_selector);
    
    $input.autocomplete({
        source: source,
        autoFocus: true,
        minLength: 1,
        disabled: false,
        // 将下拉菜单追加到当前输入框的父容器，避免被截断
        appendTo: $input.parent()
    }).focus(function() {
        // 保留原有逻辑：点击输入框时触发搜索
        $(this).autocomplete("search");
    });

    // 给父容器添加ui-front类，确保下拉菜单层级高于其他元素
    $input.parent().addClass("ui-front");
}

3. 额外检查项

• 检查#clone容器是否有overflow:hidden样式，如果有，下拉框会被截断，要么移除该样式，要么把appendTo改成$('body')（需注意定位偏移问题）。
• 确保search_input变量是严格递增的，避免克隆后的输入框ID重复。

方案说明 #

• 不用clone(true)是因为Autocomplete的插件事件不属于原生DOM事件，克隆后会残留旧实例，引发绑定冲突，不如克隆元素后重新初始化新实例更可靠。
• 指定appendTo为父容器，能避免下拉菜单被其他元素遮挡；ui-front是jQuery UI控制下拉菜单层级的核心类，必须添加到父容器才能生效。
• 修正选择器的点号错误，确保所有属性修改都能作用到新克隆的元素上。

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