Implementing a Search Bar

在 iPhone app 裡面我們使用 UITableView 來呈現大筆資料，使用者透過手指可以上下移動來瀏覽資料，如果資料筆數多可以加入 Index 在畫面的右手邊輔助，但是如果資料還是太多，我們要找其中特定一筆還是要捲動半天。所以如果提供給使用者有一個搜尋的功能，讓使用者輸入 Term 來找資料比數，這樣用起來會更貼心。雖然要一點功，但是也不會太多拉。所以這邊來說明一下怎麼加入 iPhone search bar。從設計概念上來說明，步驟要完成哪些。

首先要從新思考 Design，把原來 plist 資料直接顯示在畫面的，要抽離出來，另外放到 NSDictionary ，如此才能讓使用者查詢時候，將資料過濾過再顯示在畫面上。

每次搜尋條件清空，開設 method mutableDeepCopy 要將 NSMutableDictionary 重新再 copy 重來一次。

針對 SectionsViewController.h header file 重新整理一番。開出 UITableView 將畫面可以在 Xcode 做些控制，例如 reload data, UISearchBar 新加入搜尋列, NSDictionary 將 plist 內容讀出放到這, NSMutableDictionary 將資料拆成 Mutable Dictionary, NSMutableArray 用來控制 key, BOOL isSearching 來告知目前是否正在搜尋，可以幫助一些判斷用。

修改 View，加入 UISearchBar，並且提供 cancel 按鈕。另外將相關的 Outlet 都串聯起來，作為後面 delegate 時候所需。

再來要針對 SectionsViewController.m 裡面來重新調整一番和覆寫些 delegate 的 method。有三個區域 Table View Data Source methods、Table VIew Delegate methods 和 Search Bar Delegate methods 等等。

在 github 平台上面，我開設了一個 Section project，透過 tag 紀錄來切出練習題的版本出來。剛好 github 這邊功能很貼心，可以列出每次 commit 和前次的差異，所以我們從這個紀錄統計可以看出，有 6 個變更檔案要介紹。並且透過 https://github.com/edwardinubuntu/Sections/commit/ 這一次 commit 頁面解析，紅色為移除掉程式碼，綠色是新增程式碼。再搭配前面描述那些步驟順序對照，即可很清出看出修改上的差異了。

開發上要注意到，在加入這些 delegate 所需要的 method 時候，命名上大小寫要小心，不然在測試時候，會跑不出要的特效。所以在相關行數加入中斷點 break points 並且使用 debug mode 來跑，才能確定程式都有跑到，例如需要 searchBarSearchButtonClicked, searchBar: textDidChange:, searchBarCancelButtonClicked:, searchBarTextDidBeginEditing: 等等各種觸發事件。另外寫的時候，如果有宣告 IBOutlet，在 Interface Builder 要記得將這些串聯起來，不然會發生程式明明都有寫對，為什麼開啓模擬器測試，卻畫面沒有出現預期的效果。

以上除了可以參考書本 Beginning iPhone 3 Development 章節 Implementing a Search Bar，程式碼完整收錄在 edwardinubuntu/sections，tag v0.1 有右手邊的 index 輔助查詢、tab v0.2 加入搜尋輸入欄讓搜尋資料過濾更容易。