我们刚刚发布了 Headless UI v1.5，其中包含一个全新的 Combobox 组件。组合框类似于选择控件，但具有自动完成/预输入功能，当您处理大型数据集并希望快速筛选出正确的选项时，它是常规选择的绝佳替代方案。
与所有其他 Headless UI 组件一样，组合框抽象了所有复杂的辅助功能考虑因素，但将样式完全留给您，让您可以完全控制设计您想要的组合框，而无需担心键盘导航或屏幕阅读器支持等问题。
如果您想了解它的实际效果，这是一个快速演示
我们有意将其设计为让您可以完全控制实际结果的筛选。您可以进行基本的字符串比较，使用像 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> )}命令面板
组合框不仅可以作为独立的输入，还可以作为构建更复杂组件（如命令面板）的较低级别原语。
这实际上是我们最初创建组合框组件的动机——我们想在 Tailwind UI 中添加一个新的命令面板类别，并且需要此组件来实现这一点。
如果您碰巧拥有 Tailwind UI 许可证，请务必浏览新的 命令面板类别，看看这些组件的效果如何。如果您想知道，我们还添加了一个新的 组合框类别。
在新的命令面板的兴奋情绪下，我们还发布了一个关于使用 Tailwind CSS、React 和 Headless UI 从头开始构建命令面板的新的深入视频教程。
它涵盖了大量有趣的 Tailwind 技巧，用于使设计和动画恰到好处，并教会您大量关于如何使用新的组合框组件并将其连接到您的应用程序的知识。
试用一下
如果您的项目中已安装 Headless UI，请务必升级到 v1.5 以获取新的 Combobox 组件。这是一个次要更新，因此没有破坏性更改。
# For Reactnpm install @headlessui/react# For Vuenpm install @headlessui/vue请务必查看 官方网站 以获取最新文档。