UI 元件百科

選擇與輸入

Autocomplete｜自動完成輸入框

依輸入內容提出建議；需求允許時，輸入內容也可成為新值。

常見俗稱：自動完成輸入框、輸入建議、Autocomplete、建議清單

60 秒決策

先確認使用者要完成的事。

適合使用

  • 輸入時需要提示可能的建議，且需求允許保留自訂文字。
  • 建議用來加速輸入，不必把使用者限制在既有值。

不適合使用

  • 必須限制為既有資料。
  • 選項很少且不需要輸入。

畫面要說清楚的事

不要只交代外觀，也要交代資料與輸入規則。

先說明可不可以自由輸入

Autocomplete 與 Combobox 的核心差別不是有沒有清單，而是輸入文字是否可以成為有效值。

建議是輔助，不是陷阱

清楚顯示候選建議與目前焦點，不在選取後偷偷改寫不相同的文字。

零結果仍保留輸入意圖

沒有建議時說明可繼續輸入或調整關鍵字。

必要狀態與回應

每個狀態都要讓使用者知道下一步。

輸入中

輸入後顯示相關建議。

建議焦點

方向鍵移動焦點，Enter 選取建議。

零結果

沒有建議時說明仍可保留輸入或採取下一步。

已選取建議

使用者知道目前採用的是哪個建議。

操作 Demo

先知道要觀察什麼，再動手操作。

操作前先知道

  1. 建議與自由輸入

    先觀察：輸入時顯示建議，但不是強迫只能選其中一項。

    操作：輸入關鍵字、用方向鍵選建議，再自行改寫。

    預期結果：建議可加速輸入，自訂文字的規則也清楚。

可操作 Demo

Autocomplete｜自動完成輸入框

可自由輸入；若建議符合需求，再選擇採用。

可輸入任何關鍵字；尚未採用建議。

↑↓ 巡覽建議　Enter 採用　Esc 關閉　Tab 移動焦點

告訴 AI

把任務、規則、狀態與操作條件一次寫清楚。

建立「通知關鍵字」Autocomplete。輸入時提供相關建議，支援方向鍵、Enter 與 Escape；說明使用者可選取建議，或保留自行輸入的文字，並處理零結果。

驗收清單

不要只確認欄位能不能點。

  • 需求是否允許自由輸入？
  • 是否明確呈現建議與目前焦點？
  • Enter、Escape、方向鍵是否可預期操作？
  • 零結果時是否說明下一步？
  • 如果必須選既有值，是否應改用 Combobox？