如何用键盘滚动Javascript邮政编码自动补全组件的无序列表？

嘿，这个需求我之前做德国地址补全组件的时候刚好碰到过！给自动补全的下拉列表加键盘导航其实核心就是监听关键按键，跟踪当前选中项的索引，再同步UI和交互逻辑。我给你整理一个完整的可落地方案：

其实就是围绕键盘事件监听和选中状态管理两个核心点：

• 给PLZ输入框绑定keydown事件，捕获↓、↑、Enter、Esc这些关键操作
• 维护一个currentIndex变量记录当前选中的建议项索引（初始设为-1，表示未选中任何项）
• 根据不同按键更新索引，同步高亮选中项，处理列表滚动（避免选中项超出可视区域）
• 绑定Enter键确认选中、Esc键关闭列表的逻辑

先给你一个完整的可运行代码示例，包含HTML、CSS和JavaScript部分，你可以直接适配到你的项目里：

1. HTML结构 #

<div class="plz-autocomplete-container">
  <input type="text" id="plz-input" placeholder="PLZ" autocomplete="off">
  <input type="text" id="ort-input" placeholder="Ort" autocomplete="off">
  <!-- 自动补全建议列表 -->
  <ul id="suggestions-list" class="autocomplete-suggestions"></ul>
</div>

2. 基础样式 #

给列表加个基础样式，确保滚动和高亮效果正常：

.plz-autocomplete-container {
  position: relative;
  width: 300px;
}

#plz-input, #ort-input {
  width: 100%;
  padding: 8px;
  margin: 4px 0;
  box-sizing: border-box;
}

.autocomplete-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #e0e0e0;
  border-top: none;
  max-height: 220px;
  overflow-y: auto;
  background: white;
  z-index: 100;
}

.autocomplete-suggestions li {
  padding: 8px 12px;
  cursor: pointer;
}

.autocomplete-suggestions li.active {
  background-color: #2196F3;
  color: white;
}

3. JavaScript逻辑 #

这部分是核心，包含了建议获取、键盘导航、选中处理等功能：

const plzInput = document.getElementById('plz-input');
const ortInput = document.getElementById('ort-input');
const suggestionsList = document.getElementById('suggestions-list');

// 状态变量
let currentSuggestionIndex = -1;
let currentSuggestions = [];

// 监听PLZ输入，输入3位数字时触发补全
plzInput.addEventListener('input', (e) => {
  const inputValue = e.target.value.trim();
  
  // 仅当输入3位数字时触发补全
  if (inputValue.length === 3 && /^\d{3}$/.test(inputValue)) {
    // 这里替换成你的真实API请求，模拟德国邮编数据
    fetchSuggestions(inputValue).then(suggestions => {
      currentSuggestions = suggestions.slice(0, 10); // 限制最多10项
      renderSuggestions();
      currentSuggestionIndex = -1; // 重置选中索引
    });
  } else {
    clearSuggestions();
  }
});

// 模拟API获取邮编建议（实际项目替换成真实接口）
function fetchSuggestions(partialPlz) {
  // 示例数据：德国真实邮编+城市对应关系
  const mockData = [
    { plz: '56203', ort: 'Wetzlar' },
    { plz: '56214', ort: 'Montabaur' },
    { plz: '56202', ort: 'Wetzlar' },
    { plz: '56237', ort: 'Höhr-Grenzhausen' },
    { plz: '56201', ort: 'Wetzlar' },
    { plz: '56220', ort: 'Lahnstein' },
    { plz: '56207', ort: 'Wetzlar' },
    { plz: '56230', ort: 'Bad Ems' },
    { plz: '56209', ort: 'Wetzlar' },
    { plz: '56232', ort: 'Koblenz' },
    { plz: '56212', ort: 'Daaden' }
  ];
  
  // 筛选包含输入前缀的项
  const filtered = mockData.filter(item => item.plz.startsWith(partialPlz));
  return Promise.resolve(filtered);
}

// 渲染建议列表
function renderSuggestions() {
  suggestionsList.innerHTML = '';
  
  if (currentSuggestions.length === 0) {
    suggestionsList.style.display = 'none';
    return;
  }
  
  suggestionsList.style.display = 'block';
  currentSuggestions.forEach((item, index) => {
    const li = document.createElement('li');
    li.textContent = `${item.plz} — ${item.ort}`;
    
    // 给当前选中项加高亮类
    if (index === currentSuggestionIndex) {
      li.classList.add('active');
    }
    
    // 鼠标点击选中项
    li.addEventListener('click', () => selectSuggestion(item));
    
    suggestionsList.appendChild(li);
  });
}

// 选中建议项，填充PLZ和Ort输入框
function selectSuggestion(suggestion) {
  plzInput.value = suggestion.plz;
  ortInput.value = suggestion.ort;
  clearSuggestions();
  currentSuggestionIndex = -1;
  // 选中后可以把焦点移到Ort输入框，提升用户体验
  ortInput.focus();
}

// 清空建议列表
function clearSuggestions() {
  suggestionsList.innerHTML = '';
  suggestionsList.style.display = 'none';
}

// 键盘导航核心逻辑
plzInput.addEventListener('keydown', (e) => {
  if (currentSuggestions.length === 0) return;
  
  switch (e.key) {
    case 'ArrowDown':
      e.preventDefault(); // 阻止输入框默认的光标移动
      // 索引循环：到最后一项后回到第一项
      currentSuggestionIndex = (currentSuggestionIndex + 1) % currentSuggestions.length;
      renderSuggestions();
      // 让选中项滚动到可视区域
      scrollToActiveItem();
      break;
      
    case 'ArrowUp':
      e.preventDefault();
      // 索引反向循环：到第一项后回到最后一项
      currentSuggestionIndex = currentSuggestionIndex <= 0 
        ? currentSuggestions.length - 1 
        : currentSuggestionIndex - 1;
      renderSuggestions();
      scrollToActiveItem();
      break;
      
    case 'Enter':
      e.preventDefault();
      // 如果有选中项，确认选中
      if (currentSuggestionIndex !== -1) {
        selectSuggestion(currentSuggestions[currentSuggestionIndex]);
      }
      break;
      
    case 'Escape':
      // 关闭列表，重置状态
      clearSuggestions();
      currentSuggestionIndex = -1;
      break;
  }
});

// 滚动到当前激活的建议项
function scrollToActiveItem() {
  const activeItem = suggestionsList.querySelector('.active');
  if (activeItem) {
    // 使用nearest确保项在可视区域，避免不必要的滚动
    activeItem.scrollIntoView({ block: 'nearest' });
  }
}

// 点击页面其他区域关闭下拉列表
document.addEventListener('click', (e) => {
  const isClickInsideContainer = plzInput.contains(e.target) || suggestionsList.contains(e.target);
  if (!isClickInsideContainer) {
    clearSuggestions();
    currentSuggestionIndex = -1;
  }
});

• 滚动处理：用scrollIntoView({ block: 'nearest' })可以保证选中项始终在可视区域，尤其当列表超过最大高度出现滚动条时
• 默认行为阻止：处理ArrowDown/ArrowUp时要调用e.preventDefault()，避免输入框的默认光标移动行为干扰导航
• 边界处理：要考虑列表为空、索引超出范围的情况，避免报错
• 用户体验优化：选中项后可以自动把焦点移到Ort输入框，提升操作流畅度
• 数据适配：把fetchSuggestions函数替换成你的真实API请求即可，注意处理异步加载的情况

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