关于.autocomplete-items箭头键滚动及高度控制的技术需求问询

针对你提出的三个交互需求，我整理了一套可直接复用的实现方案，包含HTML、CSS和JavaScript代码，一步步帮你搞定：

1. 箭头键选中div元素 #

我们通过监听键盘上下箭头事件，维护当前选中项的索引，再给选中项添加高亮样式来实现：

基础HTML结构 #

<input type="text" id="myInput" placeholder="输入字母比如k试试...">
<div class="autocomplete-items" id="autocompleteList">
  <!-- 动态生成的选项div会插入这里 -->
</div>

核心CSS样式 #

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-top: none;
  z-index: 99;
  /* 对应需求2的最大高度设置 */
  max-height: 150px; /* 假设每个选项30px，刚好显示5个，按需调整 */
  overflow-y: auto;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
  height: 30px; /* 固定选项高度，方便后续滚动计算 */
  box-sizing: border-box;
}
.autocomplete-items div:hover {
  background-color: #e9e9e9;
}
/* 选中项高亮样式 */
.autocomplete-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}

关键JavaScript逻辑 #

const input = document.getElementById('myInput');
const autocompleteList = document.getElementById('autocompleteList');
let currentFocus = -1; // 记录当前选中项的索引

// 模拟输入"k"时生成大量选项
input.addEventListener('input', function(e) {
  if (this.value.toLowerCase() === 'k') {
    autocompleteList.innerHTML = '';
    // 生成10个测试选项
    for (let i = 1; i <= 10; i++) {
      const item = document.createElement('div');
      item.textContent = `选项 ${i} - 关联内容K`;
      autocompleteList.appendChild(item);
    }
  } else {
    autocompleteList.innerHTML = '';
  }
});

// 监听键盘箭头事件
input.addEventListener('keydown', function(e) {
  const items = autocompleteList.getElementsByTagName('div');
  if (e.keyCode === 40) { // 下箭头
    e.preventDefault();
    currentFocus++;
    updateActiveItem(items);
    scrollToVisible(items[currentFocus]); // 对应需求3的滚动控制
  } else if (e.keyCode === 38) { // 上箭头
    e.preventDefault();
    currentFocus--;
    updateActiveItem(items);
    scrollToVisible(items[currentFocus]); // 对应需求3的滚动控制
  }
});

// 更新选中项的高亮状态
function updateActiveItem(items) {
  if (!items) return;
  // 先移除所有项的高亮
  for (let i = 0; i < items.length; i++) {
    items[i].classList.remove('autocomplete-active');
  }
  // 循环索引边界处理
  if (currentFocus >= items.length) currentFocus = 0;
  if (currentFocus < 0) currentFocus = items.length - 1;
  // 给当前选中项加高亮
  items[currentFocus].classList.add('autocomplete-active');
}

// 需求3：滚动容器让选中项完全可见
function scrollToVisible(activeItem) {
  if (!activeItem) return;
  const container = autocompleteList;
  const itemHeight = activeItem.offsetHeight;
  const itemTop = activeItem.offsetTop;
  const containerScrollTop = container.scrollTop;
  const containerVisibleHeight = container.offsetHeight;

  // 如果选中项在容器可视区域上方，滚动到项的顶部
  if (itemTop < containerScrollTop) {
    container.scrollTop = itemTop;
  }
  // 如果选中项在容器可视区域下方，滚动到刚好让项完全显示的位置
  else if (itemTop + itemHeight > containerScrollTop + containerVisibleHeight) {
    container.scrollTop = itemTop + itemHeight - containerVisibleHeight;
  }
}

2. 限制.autocomplete-items最大高度，避免元素半显示 #

在CSS中我们已经做了两个关键设置：

• max-height: 150px;：根据单个选项的高度计算（比如30px/项，150px刚好显示5个），你可以根据自己的选项高度调整这个值
• overflow-y: auto;：当选项数量超过最大高度限制时，自动显示垂直滚动条，彻底避免元素被截断半显示的问题

3. 箭头键控制滚动，滚动距离匹配元素高度 #

在scrollToVisible函数中，我们通过判断选中项的位置和容器可视区域的关系，精准调整滚动距离：

• 向上滚动时，直接定位到选中项的顶部位置
• 向下滚动时，计算出刚好让选中项完全显示的滚动位置
• 滚动距离完全匹配选项高度，不会出现滚动过度或不足的情况

额外小提示 #

• 你可以根据UI设计自由调整选项的高度和样式，只要保持高度固定，滚动计算就会始终准确
• 如果需要支持点击选中，给每个选项div添加click事件，把选中内容填充到输入框即可

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