React.js 搜索框结果列表如何实现键盘上下箭头导航功能

核心实现逻辑 #

要实现键盘导航，核心是维护一个当前选中项的索引状态，监听输入框的键盘事件，同步更新列表高亮样式与选中行为，同时处理边界滚动、操作触发等细节，全程无需改动你已有的搜索过滤、文本高亮、点击触发逻辑。

分步实现 #

1. 新增选中项状态 #

在组件内部新增activeIndex状态，初始值设为-1表示无选中项：

const [activeIndex, setActiveIndex] = useState(-1);

2. 绑定键盘事件处理 #

在搜索输入框的onKeyDown事件中处理方向键、确认键逻辑，同时兼容搜索结果为空的场景：

const handleKeyDown = (e) => {
  // 替换为你已有的过滤后搜索结果数组
  const resultList = filteredResults;
  if (resultList.length === 0) return;

  switch(e.key) {
    // 向下方向键
    case 'ArrowDown':
      e.preventDefault(); // 阻止页面默认滚动
      // 索引循环：到最后一项后回到第一项，若需边界停止可改为：setActiveIndex(prev => prev === resultList.length -1 ? prev : prev+1)
      setActiveIndex(prev => (prev + 1) % resultList.length);
      break;
    // 向上方向键
    case 'ArrowUp':
      e.preventDefault();
      // 索引循环：到第一项后回到最后一项，若需边界停止可改为：setActiveIndex(prev => prev <= 0 ? 0 : prev -1)
      setActiveIndex(prev => prev <= 0 ? resultList.length -1 : prev -1);
      break;
    // 回车键：触发和点击列表项完全一致的操作
    case 'Enter':
      if (activeIndex > -1) {
        e.preventDefault();
        // 替换为你已有的点击列表项触发的逻辑
        handleSelect(resultList[activeIndex]);
      }
      break;
    // 按Esc键重置选中状态
    case 'Escape':
      setActiveIndex(-1);
      break;
    default:
      break;
  }
};

将事件绑定到搜索输入框：

<input
  type="text"
  // 保留你已有的输入监听逻辑
  onChange={handleSearchInput}
  onKeyDown={handleKeyDown}
/>

3. 同步列表项高亮样式 #

给每个搜索结果列表项绑定activeIndex判断，选中时新增整行高亮样式，和你已有的文本搜索高亮不冲突：

<ul className="search-results">
  {filteredResults.map((item, index) => (
    <li
      key={item.id}
      // 选中项动态加样式类
      className={`result-item ${index === activeIndex ? 'active' : ''}`}
      // 保留你已有的点击触发逻辑
      onClick={() => handleSelect(item)}
      // 鼠标悬浮时同步更新选中索引，避免鼠标操作和键盘导航冲突
      onMouseEnter={() => setActiveIndex(index)}
    >
      {/* 保留你已有的Highlighter高亮组件 */}
      <Highlighter text={item.name} keyword={searchKeyword} />
    </li>
  ))}
</ul>

补充对应基础样式：

.result-item.active {
  background-color: #f0f7ff;
  cursor: pointer;
}

4. 优化长列表滚动体验 #

如果搜索结果较多、列表带滚动条，可添加自动滚动逻辑，让选中项始终保持在可视区域内：

// 监听activeIndex变化，自动定位滚动
useEffect(() => {
  if (activeIndex > -1) {
    const activeEl = document.querySelector(`.result-item:nth-child(${activeIndex + 1})`);
    activeEl?.scrollIntoView({ block: 'nearest' });
  }
}, [activeIndex]);

注意事项 #

• 方向键事件必须调用e.preventDefault()，阻止输入时触发页面默认滚动
• 重置搜索关键词、清空搜索结果时，同步将activeIndex重置为-1，避免残留错误选中状态
• 若搜索下拉需点击外部关闭，可在下拉失焦逻辑中同步重置activeIndex，避免下次打开时出现异常高亮

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