我们刚刚发布了 Headless UI v1.5，其中包括一个全新的 Combobox 组件。Comboboxes 类似于 select 控件，但具有自动完成/提前输入功能，当您处理大型数据集并希望快速过滤以找到正确的选项时，它们是常规 select 的绝佳替代品。
像所有其他 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> )}命令调色板
Comboboxes 不仅可以用作独立的输入，还可以用作构建更复杂组件（如命令调色板）的底层原语。
这实际上是最初促使我们创建 combobox 组件的原因 - 我们想向 Tailwind UI 添加一个新的命令调色板类别，并且需要此组件来实现这一目标。
如果您碰巧拥有 Tailwind UI 许可证，请务必浏览新的 命令调色板 类别以查看最终效果。如果您想知道，我们还添加了一个新的 Comboboxes 类别。
借着新命令调色板的兴奋劲，我们还发布了一个新的 深入的屏幕录像，展示如何使用 Tailwind CSS、React 和 Headless UI 从头开始构建命令调色板。
它涵盖了大量有趣的 Tailwind 技巧，用于使设计和动画恰到好处，并教您大量关于如何使用新的 combobox 组件并将其连接到您的应用程序的知识。
立即尝试
如果您的项目中已经安装了 Headless UI，请务必升级到 v1.5 以获取新的 Combobox 组件。这是一个小更新，因此没有重大更改。
# 对于 Reactnpm install @headlessui/react# 对于 Vuenpm install @headlessui/vue请务必查看 官方网站 以获取最新的文档。