建议列表中的键盘导航

请将键盘处理程序附加到输入框元素的 onKeyDown 事件，而不要使用 onKeyPress（已弃用）或 onKeyUp。keyDown 会在字符出现在输入框之前触发，因此您可以在 ArrowDown、ArrowUp、回车键和转义键产生任何默认浏览器效果之前拦截它们。

用户按下 ArrowDown 时，请将 selectedIndex 加 1，并将最大值限制为 suggestions.length - 1：setSelectedIndex(prev => Math.min(prev + 1, suggestions.length - 1))。还要调用 e.preventDefault()，防止光标跳到输入文本末尾，因为这正是文本输入框中 ArrowDown 的默认浏览器行为。

用户按下 ArrowUp 时，请将 selectedIndex 减 1，并将最小值限制为 0：setSelectedIndex(prev => Math.max(prev - 1, 0))。您也可以在移出索引 0 时将其限制为 -1（表示没有选择），从而允许用户取消选择并自由地继续输入。

按下回车键且 selectedIndex >= 0 时，请选中高亮的建议项：将 inputValue 设置为 suggestions[selectedIndex]，关闭下拉列表，并将 selectedIndex 重置为 -1。如果没有建议项被高亮（selectedIndex 为 -1），则允许正常的表单提交或搜索操作继续执行。

按下转义键时，请将 isOpen 设置为 false 以关闭下拉列表，并将 selectedIndex 重置为 -1。不要清除输入值——用户只是想关闭建议列表而不进行选择，并保留已输入的文本以便继续编辑。

按下制表键时，请关闭下拉列表，因为浏览器本来就会将焦点移到下一个可聚焦元素。按下制表键时将 isOpen 设置为 false，可以确保焦点离开输入框后下拉列表不会继续打开。您不需要调用 preventDefault()——让浏览器处理自然的制表顺序即可。

高亮的建议项必须在视觉上有所区别。请为位于 selectedIndex 的建议项应用激活样式：className={index === selectedIndex ? 'suggestion suggestion--active' : 'suggestion'}。激活状态通常会改变背景色，让用户清楚地看到按下回车键后将选择哪个项目。

当建议列表设置了最大高度并且可以滚动时，高亮项可能会在键盘导航过程中滚出屏幕。请使用引用数组存储建议项的 DOM 元素，并在 selectedIndex 变化时调用 listItemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })。nearest 块值可以将滚动距离降至最低。

当输入内容发生变化并显示新的过滤列表时，请在同一次状态更新中将 selectedIndex 重置为 -1，或者在依赖建议项的 useEffect 中执行重置。指向已移除项目的过时索引会导致用户选中错误的建议项。

完整的用户流程是：用户输入内容进行过滤，ArrowDown 高亮第一个项目，继续按 ArrowDown 在列表中向下移动，按 ArrowUp 向上返回，按回车键选中高亮项目，按转义键关闭列表而不进行选择。这涵盖了用户对自动完成输入框所预期的所有标准键盘交互模式。

在文本输入框中处理 ArrowDown 和 ArrowUp 时，请始终调用 e.preventDefault()。否则，ArrowDown 会将文本光标移到末尾，ArrowUp 会将其移到开头。这些光标移动会与您的选择索引导航冲突，造成令人困惑的行为。

当用户在 selectedIndex = 2 处高亮建议项时按下回车键，会发生什么？

在输入框上处理 onKeyDown。ArrowDown 会递增 selectedIndex（上限为最大值），ArrowUp 会递减 selectedIndex（下限为 0 或 -1），回车键会选中高亮项，退出键会关闭列表但不进行选择，制表键会关闭列表并让浏览器移动焦点。始终对方向键调用 preventDefault，并将高亮项滚动到可视区域内。