我們剛發佈了 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也請務必查看官方網站以取得最新的文件。