JavaScript产品搜索下拉列表滚动向下时自动回顶的问题排查

看起来你遇到的是jQuery UI Autocomplete组件的滚动异常问题，我之前也碰到过类似情况，大概率是自定义渲染的DOM结构/样式冲突，或者focus事件的处理干扰了组件的默认滚动逻辑。下面是具体的排查和修复步骤：

1. 修复自定义渲染的DOM结构与样式 #

你在_renderItem里使用了Bootstrap的col-md-10和col-md-2类，这类网格类默认是float: left布局，会导致<li>元素的高度计算异常——jQuery UI Autocomplete依赖准确的列表项高度来计算滚动位置，浮动元素会让容器高度塌陷，从而触发滚动时的位置错误。

修改渲染逻辑，改用flex布局或者不破坏li正常文档流的方式：

.autocomplete('instance')._renderItem = function(ul, item) {
    var is_overselling_allowed = $('input#is_overselling_allowed').length > 0;
    if (item.enable_stock == 1 && item.qty_available <= 0 && !is_overselling_allowed) {
        let string = '<li class="ui-state-disabled">';
        string += `<span>${item.name}${item.type === 'variable' ? '-' + item.variation : ''}</span>`;
        string += `<span class="sku">(${item.sub_sku})</span>`;
        let selling_price = item.variation_group_price || item.selling_price;
        string += `<br><span class="price">Price: ${selling_price} (Out of stock)</span>`;
        string += '</li>';
        return $(string).appendTo(ul);
    } else {
        let string = '<li>';
        // 使用flex容器代替Bootstrap网格，避免浮动导致的高度塌陷
        string += '<div class="autocomplete-item-container" style="display: flex; align-items: center; gap: 10px; padding: 8px;">';
        string += '<div class="item-details flex-grow-1">';
        string += `<span>${item.name}${item.type === 'variable' ? '-' + item.variation : ''}</span>`;
        string += `<span class="sku text-muted">(${item.sub_sku})</span>`;
        let selling_price = item.variation_group_price || item.selling_price;
        string += `<br><span class="price fw-bold">Price: ${selling_price}</span>`;
        if (item.enable_stock == 1) {
            let qty_available = __currency_trans_from_en(item.qty_available, false, false, __currency_precision, true);
            string += `<span class="stock text-secondary"> - ${qty_available}${item.unit}</span>`;
        }
        string += '</div>';
        string += `<div class="item-image"><img src="${item.image_url}" width="100" height="100" style="object-fit: cover;"></div>`;
        string += '</div>';
        string += '</li>';
        return $(string).appendTo(ul);
    }
};

用flex布局保持li的高度正确，避免塌陷问题。

2. 调整focus事件的处理逻辑 #

你的focus事件里直接return false，会阻止jQuery UI Autocomplete的默认聚焦行为——当用户用键盘向下导航时，组件无法正确跟踪当前选中的列表项，导致滚动位置重置到顶部。

修改focus事件，只在需要的时候阻止选中，而不是完全阻止默认行为：

focus: function(event, ui) {
    // 当库存不足时，阻止选中当前项，但允许滚动聚焦
    if (ui.item.qty_available <= 0) {
        event.preventDefault();
        // 可选：添加库存不足的提示样式
        $(ui.item.element).addClass('stock-warning');
        return;
    }
},

用event.preventDefault()代替直接return false，只阻止选中操作，保留滚动聚焦的默认逻辑。

3. 额外排查点 #

• 检查页面是否有其他全局滚动事件监听，可能和Autocomplete的滚动逻辑冲突；
• 确保jQuery UI和jQuery的版本兼容，建议使用稳定的匹配版本（比如jQuery 3.x搭配jQuery UI 1.13.x）；
• 检查Autocomplete下拉容器的CSS样式，确保是overflow-y: auto而非其他异常设置。

按照上面的步骤修改后，应该能解决滚动跳回顶部的问题。

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