我们刚刚发布了 Headless UI v1.5，其中包含全新的 Combobox 组件。组合框类似于选择控件，但具有自动完成/前置功能，当您处理大数据集时，它是一个快速筛选正确选项的绝佳替代选择。
与所有其他 Headless UI 组件一样，组合框抽象了所有复杂的可访问性考虑，但将样式完全留给您，您可以完全控制设计您想要的组合框，而无需担心键盘导航或屏幕阅读器支持等问题。
如果您想查看它的实际效果，这里有一个快速演示：
Wade Cooper
Arlene McCoy
Devon Webb
Tom Cook
Tanya Fox
Hellen Schmidt
我们故意设计它，使您可以完全掌控过滤实际结果。您可以进行基本的字符串比较，使用模糊搜索库，如 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 组件。这是一个小幅更新，因此没有破坏性变更。
# 对于 Reactnpm install @headlessui/react# 对于 Vuenpm install @headlessui/vue请务必查看 官方网站 以获取最新文档。