1.在storyboard裡面拖入一個 Search Bar 和 一個 tableView。
2.建立ViewController,實作代理:UISearchBarDelegate,UITableViewDataSource,UITableViewDelegate.
代碼實作如下:
@IBOutlet weak var searchBar: UISearchBar!
@IBOutlet weak var tableView: UITableView!
let array = ["beijing", "shanghai","guangzhou","shenzhen" ,"changsha","wuhan","tianjing","hangzhou"]
var result = [String]()
override func viewDidLoad() {
super.viewDidLoad()
// 搜尋内容為空時,顯示全部内容
self.result = self.array
self.searchBar.delegate = self
self.tableView.delegate = self
self.tableView.dataSource = self
self.searchBar.placeholder = "搜尋"
// 注冊tableviewCell
self.tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "cell")
}
// tableview 代理方法
extension ViewController:UITableViewDataSource,UITableViewDelegate {
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return self.result.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let identify: String = "cell"
let cell = tableView.dequeueReusableCellWithIdentifier(identify, forIndexPath: indexPath) as UITableViewCell
cell.accessoryType = UITableViewCellAccessoryType.DisclosureIndicator
cell.textLabel?.text = self.result[indexPath.row]
return cell
}
}
// UISearchBar 代理方法
// 每次改變搜尋内容時候調用此方法
extension ViewController: UISearchBarDelegate {
func searchBar(searchBar: UISearchBar, textDidChange searchText: String) {
print("[ViewController searchBar] searchText: \(searchText)")
// 沒有搜尋内容時顯示全部内容
if searchText == "" {
self.result = self.array
} else {
// 比對使用者輸入的字首,不區分大小寫
self.result = []
for arr in self.array {
if arr.lowercaseString.hasPrefix(searchText.lowercaseString) {
self.result.append(arr)
}
}
}
// 重新整理tableView 資料顯示
self.tableView.reloadData()
}
// 搜尋觸發事件,點選虛拟鍵盤上的search按鈕時觸發此方法
func searchBarSearchButtonClicked(searchBar: UISearchBar) {
searchBar.resignFirstResponder()
}
// 書簽按鈕觸發事件
func searchBarBookmarkButtonClicked(searchBar: UISearchBar) {
print("搜尋曆史")
}
// 取消按鈕觸發事件
func searchBarCancelButtonClicked(searchBar: UISearchBar) {
// 搜尋内容置空
searchBar.text = ""
self.result = self.array
self.tableView.reloadData()
}
}
實作效果如下: