Autocomplete 自動補全

自由文字輸入 + 建議清單。使用 Element Plus 的 el-autocomplete。

設計準則

• 和 Select + filterable 的分工:值必須從清單裡選 → Select;值是自由文字、建議只是幫忙打字 → Autocomplete(搜尋框、地址)
• 建議清單是輔助,使用者不選任何建議也要能送出
• 加 clearable 讓使用者一鍵重來
• 建議項可帶次要資訊(狀態、分類)幫助辨識,主資訊靠左、次要靠右

基本用法

loading

自訂建議項

建議項帶次要資訊:

loading

自訂頭部與底部

header 放建議清單的說明,footer 放「清除」這類針對整個輸入的操作:

loading

Do / Don't

✅ Do	❌ Don't
自由文字 + 建議輔助	值必須從清單選(用 Select)
不選建議也能送出	強迫點選建議才算有效
建議帶次要資訊幫助辨識	一排看不出差別的同名建議

給工程師

完整 API 見 Element Plus Autocomplete 文件。 本站規範優先於 EP 文件中的視覺建議。