如何让jQuery Autocomplete的建议同时显示在两个容器中？

我懂你要实现的效果：让Autocomplete的下拉建议同时出现在输入框下方和#resultDistributor容器里。你之前的尝试出错是因为误解了_renderItem函数的作用——这个函数必须返回要添加到下拉菜单<ul>的<li>元素，你写了两次return，第二次代码根本不会执行，而且直接在这个函数里追加内容还会导致重复渲染、逻辑混乱。

下面是正确的实现方案，兼顾下拉菜单渲染和额外容器的同步展示：

$( "#project" ).autocomplete({
    minLength: 0,
    source: projects,
    focus: function( event, ui ) {
        $( "#project" ).val( ui.item.land );
        return false;
    },
    select: function( event, ui ) {
        $( "#project" ).val( ui.item.jurisdiction );
        $( "#project-description" ).html( ui.item.company );
        return false;
    },
    change: function( event, ui ) {
        $('#resultDistributor').html("");
    },
    // 当下拉菜单打开时，同步渲染建议到额外容器
    open: function(event, ui) {
        var $resultContainer = $('#resultDistributor');
        $resultContainer.empty(); // 先清空旧内容
        
        // 遍历当前的建议项，渲染到目标容器
        $(this).autocomplete('instance').menu.element.find('li').each(function() {
            var itemData = $(this).data('ui-autocomplete-item');
            $resultContainer.append(`<div>${itemData.company}<br>${itemData.jurisdiction}</div>`);
        });
    },
    // 下拉菜单关闭时清空容器，避免残留
    close: function(event, ui) {
        $('#resultDistributor').html("");
    }
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
    // 保持_renderItem的原有职责：渲染下拉菜单的单个选项
    return $( "<li>" )
        .data('ui-autocomplete-item', item) // 绑定item数据，方便后续获取
        .append( `<div>${item.company}<br>${item.jurisdiction}</div>` )
        .appendTo( ul );
};

关键说明： #

• _renderItem的正确用法：这个函数只负责生成下拉菜单的<li>元素，并且必须返回它。我们在这里给<li>绑定了item数据，方便在open事件里提取内容。
• open事件同步内容：当下拉菜单打开时，我们从菜单的<li>元素里获取每个建议项的数据，统一渲染到#resultDistributor，避免重复渲染。
• close/change事件清理容器：确保下拉关闭或输入框内容改变时，额外容器的内容被清空，不会留下旧的建议。

如果想在输入框输入过程中实时同步（而不是只在下拉打开时），可以把同步逻辑移到search事件里，但要注意防抖处理，避免频繁更新容器。

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