jQuery UI Autocomplete短列表最后一项触发垂直滚动条问题

嘿，这个问题我之前也踩过坑！本质上是jQuery UI Autocomplete 1.12.1在计算下拉菜单高度时，没考虑到悬停状态下列表项的样式变化（比如边框、内边距的细微调整），导致明明是短列表，最后一项悬停时却触发了滚动条。给你几个实用的解决方案：

方案1：快速缓冲法（修改CSS） #

给下拉菜单加一点底部内边距，给悬停元素的高度变化留缓冲空间，最简单直接：

.ui-autocomplete {
  height: auto;
  max-height: 180px;
  overflow-x: hidden;
  z-index: 1002;
  padding-bottom: 4px; /* 给底部留缓冲，抵消悬停时的高度变化 */
}

方案2：重写组件计算逻辑（更彻底） #

Autocomplete默认的_resizeMenu方法只会计算普通状态下的列表项高度，我们可以重写这个方法，让它考虑悬停状态的元素尺寸：

$(function() {
  // 重写Autocomplete的菜单高度计算方法
  $.ui.autocomplete.prototype._resizeMenu = function() {
    const menuUl = this.menu.element;
    const lastItem = menuUl.find('li:last');
    
    // 临时模拟悬停状态，获取最后一项的实际高度
    const wasHovered = lastItem.hasClass('ui-state-hover');
    lastItem.addClass('ui-state-hover');
    const hoverItemHeight = lastItem.outerHeight();
    if (!wasHovered) lastItem.removeClass('ui-state-hover');
    
    // 重新计算所有列表项的总高度
    const totalItemsHeight = menuUl.children().map(function() {
      return $(this).outerHeight();
    }).get().reduce((sum, height) => sum + height, 0);
    
    // 取总高度和max-height的最小值，设置菜单高度
    menuUl.outerHeight(Math.min(totalItemsHeight + (menuUl.outerHeight() - menuUl.height()), this.options.maxHeight));
  };
});

这个方法会临时给最后一项加上悬停样式，计算它的真实高度后再调整菜单总高度，从根源避免滚动条误触发。

方案3：调整悬停样式（自定义样式适配） #

如果是你自己给ui-state-hover加了额外的上下内边距或边框导致高度变化，那可以把这些样式改成不影响元素高度的类型：

/* 替换掉会改变高度的悬停样式 */
.ui-autocomplete li.ui-state-hover {
  background-color: #f5f5f5;
  outline: 1px solid #ccc; /* 用outline代替border，不占用元素空间 */
  /* 去掉padding-top/padding-bottom这类会改变高度的属性 */
}

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