#23 訂飲料APP｜迷客夏｜Part4: SearchController
Published in
Mar 12, 2022
這篇介紹訂飲料APP的結帳頁面選取店鋪時用到的SearchController寫法。
Demo動畫
架構
為了要設計滑動時也能浮在上方的SearchBar，這個畫面的架構如下：
Navigation Controller → TableViewController
在Storyboard拉好上面兩個Controller，指定TableViewController的class後，其他的設定都在程式碼完成。
建立SearchController
在TableViewController的viewDidLoad()中加入下列程式碼建立Search Controller。
let searchController = UISearchController()
navigationItem.searchController = searchController加入下列程式碼，避免滑動頁面時SearchController消失。
navigationItem.hidesSearchBarWhenScrolling = false定義searchResultsUpdater。
searchController.searchResultsUpdater = self定義搜尋方法
這邊另外寫了extension來遵從UISearchResultsUpdating，並且加入了updateSearchResults的方法。
用searchController.searchBar.text來抓取搜尋列的字串，如果不為空白時則開始過濾店鋪資訊。
並用filteredStores來儲存店鋪資料，若沒有輸入關鍵字時則包含全部店鋪，當輸入關鍵字時才會過濾店鋪資料。
這邊會將name或address包含關鍵字的資料過濾出來，回傳true。只有回傳true的資料才會被加入到filteredStores中。
最後tableView.reloadData()來重新顯示過濾後的店鋪資訊。
