Headless UI v1.5：带组合框的版本

我们刚刚发布了 Headless UI v1.5，其中包含一个全新的 Combobox 组件。组合框类似于选择控件，但具有自动补齐/预先输入功能，当你处理大型数据集并希望快速筛选出合适的选项时，它是常规选择控件的绝佳替代方案。

¥We just released Headless UI v1.5, which includes a brand new Combobox component. Comboboxes are like select controls but with autocomplete/typeahead functionality, and are a great alternative to a regular select when you're working with large datasets and want to quickly filter for the right option.

与所有其他 Headless UI 组件一样，组合框抽象出了所有复杂的可访问性考虑因素，将样式完全交给你，让你可以完全控制设计你想要的组合框，而无需担心键盘导航或屏幕阅读器支持等问题。

¥Like all other Headless UI components, the combobox abstracts away all of the complex accessibility considerations but leaves the styling completely up to you, giving you total control to design exactly the combobox you want without worrying about things like keyboard navigation or screen reader support.

如果你想亲眼看看实际效果，这里有一个简短的演示：

¥Here's a quick demo if you'd like to see it in action:

我们特意设计了它，以便你可以完全控制实际结果的过滤。你可以进行基本的字符串比较，使用像 Fuse.js 这样的模糊搜索库，甚至可以向 API 发出服务器端请求 - 只要对你的项目有意义就行。

¥We've intentionally designed it so that you have full control over filtering the actual results. You can do basic string comparisons, use a fuzzy search library like Fuse.js, or even make server-side requests to an API — whatever makes sense for your project.

使用基本字符串比较过滤结果的样子如下：

¥Here's what it looks like to filter the results using a basic string comparison:

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>
  )
}

命令面板(Command palettes)

¥Command palettes

组合框不仅可以作为独立的输入控件，还可以用作构建更复杂组件（例如命令面板）的底层原语。

¥Comboboxes are not only great as standalone inputs, but they can also be used as a lower-level primitive for building more complex components, such as command palettes.

这实际上就是我们最初创建组合框组件的动机 - 我们想在 Tailwind UI 中添加一个新的命令面板类别，并且需要这个组件来实现这一点。

¥This is actually what originally motivated us to create the combobox component in the first place — we wanted to add a new command palettes category to Tailwind UI and needed this component to make that happen.

如果你恰好拥有 Tailwind UI 许可证，请务必浏览新的 Command Palettes 类别，了解这些功能的效果。如果你好奇，我们还添加了一个新的 Comboboxes 类别。

¥If you happen to have a Tailwind UI license, be sure to browse the new Command Palettes category to see how these turned out. And if you're wondering, we also added a new Comboboxes category as well.

伴随着新命令面板的发布，我们还刚刚发布了一篇新的 in-depth screencast 文章，介绍如何使用 Tailwind CSS、React 和 Headless UI 从头构建命令面板。

¥Riding on the excitement of the new command palettes, we also just published a new in-depth screencast on building a command palette from scratch with Tailwind CSS, React and Headless UI.

它涵盖了大量有趣的 Tailwind 技巧，可帮助你获得恰到好处的设计和动画，并教你大量有关如何使用新的组合框组件并将其连接到你的应用中的知识。

¥It covers tons of interesting Tailwind tricks for getting the design and animations just right, and teaches you a ton about how to use the new combobox component and wire it into your app.

试用(Try it out)

¥Try it out

如果你的项目中已经安装了 Headless UI，请务必升级到 v1.5 以获取新的 Combobox 组件。这是一个小更新，因此没有重大更改。

¥If you already have Headless UI installed in your project, be sure to upgrade to v1.5 to get the new Combobox component. This is a minor update so there are no breaking changes.

# For React
npm install @headlessui/react
# For Vue
npm install @headlessui/vue

请务必查看 the official website 获取最新文档。

¥Be sure to also check out the official website for the latest documentation.