Headless UI v1.5：带下拉菜单的版本

我们刚刚发布了 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 React
npm install @headlessui/react

# For Vue
npm install @headlessui/vue

请务必查看官方网站以获取最新的文档。

Headless UI v1.5：带下拉菜单的版本

​命令面板

​试试看

命令面板

试试看