60 秒決策
先確認使用者要完成的事。
適合使用
- 使用者需要輸入關鍵字，從大量既有資料中搜尋並選取一筆。
- 資料可能由 API 載入，且必須限制為既有值。
不適合使用
- 選項很少且不需輸入。
- 需求允許把任意輸入內容當成新值。
畫面規則
輸入欄、選項清單與目前選取值，要讓人一眼分得清。
Label 先說資料類型
「指派部門」比單純的搜尋圖示更能說明要選什麼。
輸入是在找既有資料
候選清單要能讓使用者知道輸入後需選取既有項目。
清單狀態不能消失
載入、無結果、失敗與停用都要在欄位附近清楚回饋。
必要狀態
資料還沒來、找不到或失敗時，都要告訴使用者下一步。
預設與輸入
輸入關鍵字後展開符合的既有選項。
已選取
保留目前選取資料，並能重新搜尋或清除。
載入與無結果
清楚說明正在讀取或找不到符合選項。
失敗與停用
提供重試或前置條件，不讓清單靜默空白。
操作 Demo
先輸入、再用鍵盤選取，確認每個狀態都沒有把人卡住。
操作前先知道
可搜尋的既有選項
先觀察：輸入、候選清單、鍵盤焦點與狀態如何一起運作。
操作：輸入「研究」，按方向鍵與 Enter 選取。
預期結果：只能選既有部門，並看得見選取與錯誤狀態。
可操作 Demo
Combobox｜組合式選擇框
輸入關鍵字，從既有部門中選擇一項。
- 產品組
- 營運組
- 客服組
- 研究組
- 設計組
- 平台工程組
預設狀態：尚未選擇部門。
↑↓ 選擇 Enter 確認 Esc 關閉 Tab 移動焦點
告訴 AI
先講清楚資料規則，AI 才不會把搜尋框做成可自由輸入。
請為 LumenDesk 的「搜尋部門」欄位建立單選 Combobox。
部門選項來自 API；使用者可以輸入關鍵字搜尋，但只能選擇清單中的既有部門，不能建立新值。
畫面要有可見 Label、目前選取值、展開控制與可辨識的 Focus 樣式。
提供 Default、Selected、Loading、Empty、Error、Disabled 狀態；Error 要說明問題並提供重試方式。
鍵盤可用 ↑／↓ 移動選項、Enter 選取、Escape 關閉清單。
360px 寬度下，Label、選取值與錯誤訊息都不能被截斷。驗收清單
不要只檢查「能不能輸入」。
- 輸入後是否只能選既有值？
- 是否有 Label、載入、無結果、失敗與停用狀態？
- 方向鍵、Enter、Escape 是否可預期操作？
- 是否保留目前選取值？
- 360px 時清單與鍵盤是否可用？