搜索輸入自動提示（Suggestion/Autocomplete）是高頻UI組件。實現邏輯不複雜，核心在於下拉層的樣式封裝。本文提供 `suggestion.css` 核心樣式代碼，可直接集成項目。

核心樣式代碼

.sugLayerDiv {
  position: relative;
  overflow: hidden;        /* 內容溢出隱藏 */
  background: #fff;        /* 白色背景 */
  border: #c5dadb 1px solid; /* 邊框色 */
  display: none;           /* 初始隱藏，JS觸發顯示 */
}

關鍵屬性解讀

• position: relative：為絕對定位的子元素（提示項）建立定位上下文
• overflow: hidden：防止長列表撐破容器，配合JS實現滾動或分頁
• background: #fff：確保在任何頁面背景下提示層可讀
• border: 1px solid #c5dadb：淡藍灰邊框，邊界清晰不刺眼
• display: none：默認隱藏，由JS根據輸入狀態切換顯示

擴展建議

實際項目中通常需補充：

• 提示項 `.sug-item` 樣式（padding、hover態、選中態）
• 高亮匹配關鍵字 `.highlight` 樣式
• 加載狀態 `.loading` 樣式
• 空狀態 `.empty` 提示樣式
• 響應式寬度適配（`width: 100%` / `max-width`）
• 陰影 `box-shadow` 提升層級感

此為最小可用核心樣式，建議納入組件庫標準化管理，配合JS邏輯（防抖、請求、鍵盤導航、無障礙ARIA）構建生產級自動提示組件。