- 連結 是 JavaScript 30 Day 6 Ajax Type Ahead 的範例
- 希望能根據上述範例,根據
Spac改寫成你認為最好的解決方案,不限制你用任何的 library,但唯一的限制是希望你能使用任一主流前端框架(Vue、React、Angular)。
- 數據整合：
- ✅ 使用 Ajax 來獲取數據，可以視情況選擇使用的工具。
- ✅ 處理非同步數據載入及錯誤狀況。
- 搜尋功能：
- ✅ 實作一個搜尋輸入框。
- ✅ 根據輸入即時過濾結果。
- 顯示結果：
- ✅ 展示與輸入匹配的結果。
- ✅ 考量空白和無匹配結果時的使用者體驗。
- 使用者介面：
- ✅ 有需要可以利用所選框架的元件和樣式系統。
- ✅ 確保介面美觀、響應式及易於使用。
- 程式碼組織：
- ✅ 清晰的元件劃分與邏輯封裝。
- ✅ 遵循框架推薦的最佳實踐和程式碼風格。
- 額外挑戰（選擇性）：
- 實現進階功能，如快取搜尋結果、✅防抖動、錯誤處理介面等。
- ✅ 這個範例實際上有一個 bug，當搜尋框清空時並沒有恢復到最初的狀態，可以請你修正。
- 思考要如何實現專案的
可攜性讓任何的開發者可以在不同的裝置都能夠輕鬆開發。 - ✅ 可能的話可以嘗試部屬到
github-pages👉 github pages 連結 - ✅ 目前該範例的 json 資料是從另一個 repo 中取得，這並不是一個很優雅的作法，可能的話希望你能透過任何方法解決這個問題。
- 功能的完整性與正確性。
- 程式碼品質與組織性。
- 使用者介面設計與體驗。
- 對框架特性和最佳實踐的理解與運用。
- 程式碼的交付方式也會在考試的評分項目中，但建議直接提供 github 連結，如何讓其他開發者能快速了解你的專案內容會是交付的評分標準。
- 出題者知道不可能阻止面試者使用任何 AI 工具輔助,所以請放心使用。
- 這題的重點並不是把功能實做出來（當然實作出來是基本的），而是希望能夠看到面試者身為開發者對於軟體
設計的能力。 - 不限於使用任何 library 或工具，但會希望了解到使用的原因和考量。
- 能夠做到多少就做多少!量力而為即可，題目出得很廣泛，並不期待能夠全部的題目都能解答，是期待能給面試者一個發揮的舞台！加油！