當資料筆數眾多的時候,就會需要利用搜尋的功能,來過濾不相關的資料,方便我們找到想要的項目,此時就會需要利用 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
}
實際執行結果