我们刚刚发布了 Headless UI v1.5，其中包含一个全新的 Combobox 组件。Combobox 组件类似于选择控件，但具有自动完成/提前输入功能，当您处理大型数据集并希望快速筛选出正确的选项时，它是常规选择控件的绝佳替代方案。
与所有其他 Headless UI 组件一样，combobox 组件抽象化了所有复杂的辅助功能考量，但将样式完全留给您，让您可以完全控制设计您想要的 combobox 组件，而无需担心键盘导航或屏幕阅读器支持等问题。
如果您想观看实际操作演示，请观看以下快速演示
我们有意将其设计为让您可以完全控制实际结果的筛选。您可以进行基本的字符串比较，使用像 Fuse.js 这样的模糊搜索库，甚至可以向 API 发送服务器端请求 —— 无论哪种方式对您的项目有意义即可。
以下是使用基本字符串比较来筛选结果的示例
import { useState } from 'react'import { Combobox } from '@headlessui/react'const people = [ 'Wade Cooper', 'Arlene McCoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt',]function MyCombobox() { const [selectedPerson, setSelectedPerson] = useState(people[0]) const [query, setQuery] = useState('') const filteredPeople = query === '' ? people : people.filter((person) => { return person.toLowerCase().includes(query.toLowerCase()) }) return ( <Combobox value={selectedPerson} onChange={setSelectedPerson}> <Combobox.Input onChange={(event) => setQuery(event.target.value)} /> <Combobox.Options> {filteredPeople.map((person) => ( <Combobox.Option key={person} value={person}> {person} </Combobox.Option> ))} </Combobox.Options> </Combobox> )}命令面板
Combobox 组件不仅可以作为独立的输入框使用，还可以用作构建更复杂组件（例如命令面板）的底层基础组件。
这实际上是我们最初创建 combobox 组件的动机 —— 我们想在 Tailwind UI 中添加一个新的命令面板类别，并且需要这个组件来实现这一目标。
如果您碰巧拥有 Tailwind UI 许可证，请务必浏览新的 Command Palettes 类别，看看效果如何。如果您有疑问，我们还添加了一个新的 Comboboxes 类别。
借着新的命令面板的激动人心，我们还发布了一个新的 深入的屏幕录像，内容是关于使用 Tailwind CSS、React 和 Headless UI 从头开始构建命令面板。
它涵盖了大量有趣的 Tailwind 技巧，用于使设计和动画恰到好处，并教您大量关于如何使用新的 combobox 组件并将其连接到您的应用程序中的知识。
试用一下
如果您已经在您的项目中安装了 Headless UI，请务必升级到 v1.5 以获取新的 Combobox 组件。这是一个小更新，因此没有破坏性更改。
# For Reactnpm install @headlessui/react# For Vuenpm install @headlessui/vue也请务必查看 官方网站 以获取最新的文档。