带建议列表的受控输入

自动完成组件包含两个主要部分：受控文本输入框和下拉建议列表。输入框位于正常文档流中，下拉列表使用绝对定位，直接位于输入框下方。两者共同作为一个交互式控件运行，尽管它们是独立的 DOM 元素。

您需要四个状态变量：inputValue（字符串——已输入的内容）、suggestions（数组——当前匹配的项目）、isOpen（布尔值——下拉列表是否可见）以及 selectedIndex（数字——键盘导航时高亮的建议项；没有选中项时从 -1 开始）。

请将输入框完全设为受控输入框：value={inputValue} 和 onChange={e => setInputValue(e.target.value)}。这样 React 就能完全控制显示的文本。每次按键都会更新状态，从而触发重新渲染并显示新值。在自动完成场景中不要使用非受控输入框——您需要以编程方式读取并设置该值。

当建议来自本地数组时，请根据 inputValue 在每次渲染时进行过滤：使用 item.toLowerCase().includes(inputValue.toLowerCase()) 比较每个项目。如果列表很大，您可以使用 useMemo 计算结果，以避免每次重新渲染时都重新计算。对于较小的列表，直接进行行内过滤即可。

当 inputValue.length > 0 且 suggestions.length > 0 时打开下拉列表。当输入框失去焦点时（稍微延迟，以便建议项的点击先完成）、选中建议项时或按下转义键时关闭下拉列表。请相应地设置 isOpen，以控制条件渲染。

当输入框失去焦点时会触发 onBlur 事件，而用户点击建议项时就会发生这种情况。如果在失焦时立即关闭下拉列表，建议项上的点击就不会生效，因为下拉列表会在点击事件触发前消失。请使用 setTimeout(() => setIsOpen(false), 150)，为点击操作留出完成时间。

请使用 position: absolute 定位下拉列表，使其覆盖输入框下方的内容，而不是将内容向下推移。请设置较高的 z-index（100 或更高），使其显示在其他内容上方。请设置 max-height，并结合 overflow-y: auto，避免结果较多时列表变得过高。

每个建议项都应有一个 onClick 处理程序：onClick={() => { setInputValue(suggestion); setIsOpen(false); }}。这样会将输入框设置为选中的建议项，并关闭下拉列表。选择操作会立即完成且感觉自然，符合用户对自动完成输入框的预期。

除了使用失焦延迟外，您还可以在每个建议项上使用 onMouseDown={e => e.preventDefault()}。这样可以防止鼠标按下事件从输入框夺走焦点，因此点击建议项时不会触发失焦事件。输入框会保持焦点，点击处理程序也能正常触发。

优秀的自动完成控件必须支持键盘导航。用户应当能够按下 ArrowDown 高亮第一个建议项，继续按下以向下移动，按下回车键进行选择，并按下转义键关闭列表而不进行选择。实现方式是在输入框元素上处理 onKeyDown。

每当用户输入内容并且 inputValue 发生变化时，请将 selectedIndex 重置为 -1。这样会清除之前的键盘选择，使新过滤出的建议项列表一开始没有任何高亮项。列表变化后仍指向其他项目的过时选择索引会令人困惑，也是不正确的。

为什么要在建议项上使用带有 e.preventDefault() 的 onMouseDown，而不是依赖失焦延迟？

自动完成控件需要四个状态变量：inputValue、suggestions、isOpen 和 selectedIndex。请使用受控输入框，根据输入内容过滤建议项，并通过 isOpen 管理下拉列表的可见性。对于失焦先于点击发生的竞态情况，可以使用计时器或 onMouseDown preventDefault 进行处理。每当输入内容发生变化时，都要重置 selectedIndex。