前言

當資料筆數眾多的時候，就會需要利用搜尋的功能，來過濾不相關的資料，方便我們找到想要的項目，此時就會需要利用 search bar，今天就來介紹 search bar 搭配 table view 做實際的應用。

實際範例

在 view controller 中拉放一個 search bar 和 table view，如下圖，其餘 table view 的設定就不在此贅述

分別把這兩個元件的 outlet 放入 view controller 中

@IBOutlet weak var searchBar: UISearchBar!
@IBOutlet weak var tableView: UITableView!

加入 table view 的委任

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
// 省略
}

採用 search bar 的委任並用 extension 的方式加入（方便管理），並用函數 searchBar(_: textDidChange:) 偵測在 search bar 輸入的變化

extension ViewController: UISearchBarDelegate {
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        searchArray = citiArray.filter({ (string) -> Bool in
            return  string.prefix(searchText.count) == searchText
        })
        searching = true
        tableView.reloadData()
    }
}

在 viewDidLoad() 中加入以下程式碼，讓採用的委任可以順利運作

override func viewDidLoad() {
        super.viewDidLoad()
        
        tableView.delegate = self
        tableView.dataSource = self
        searchBar.delegate = self
    }

其餘的程式碼

let citiArray = ["臺北市", "新北市", "新竹縣", "新竹市","桃園市",
                "臺中市", "嘉義市", "臺南市", "高雄市", "屏東縣"]
    
    var searchArray: [String] = [String]()

    // 用此變數表示現在是否為搜尋模式
    var searching = false
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        if searching {
            return searchArray.count
        } else {
            return citiArray.count
        }       
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cellIdentifier = "datacell"
        let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath)
        
        if searching {
            cell.textLabel?.text = searchArray[indexPath.row]
        } else {
            cell.textLabel?.text = citiArray[indexPath.row]
        }
        
        cell.selectionStyle = .none
        
        return cell
    }

實際執行結果