swift UI专项训练37 实时显示搜索结果的搜索框SearchBar

今天我们来讲点高级点的知识，在搜索框中输入关键字，下方的tableView自动匹配包含关键字的结果。用我最近在做的一款美食类APP为例。

在storyboard中拖入一张表，然后与Vc中的代码关联起来：

@IBOutlet weak var tableView: UITableView!

var caipins = CaipinArray().caipinArray
    var searchResults = [caipin]()

import UIKit

class caipin: NSObject {
    var name:string = ""
    var rest:string = ""
    var price:Float = 0
    var score:Float = 0
    var image:string = ""
    var collected:Bool = false
    var taste:string = ""
    var nutrition:string = ""
    init(name:string,rest:string,price:Float,score:Float,image:string,collected:Bool,taste:string,nutrition:string){
    self.name = name
    self.rest = rest
    self.price = price
    self.score = score
    self.image = image
    self.collected = collected
    self.taste = taste
    self.nutrition = nutrition
    }
}

CaipinArray是一个赋值过的菜品类，就不演示代码了，然后我们让vc继承tableview的datasource和delegate，实现这两个类的基本方法，本话重点不在这里就不演示了。

然后我们定义一个UISearchController的类：

var searchController:UISearchController!

self.tableView.tableFooterView = UIView(frame: CGRectZero)
       searchController = UISearchController(searchResultsController: nil)
        searchController.searchBar.sizeToFit()
        self.view.addSubview(searchController.searchBar)
        tableView.tableHeaderView = searchController.searchBar
        definesPresentationContext = true

点击搜索框效果如下：

现在新建一个方法：

func filterContentForSearchText(searchText: String) {
        
        searchResults = caipins.filter({ ( caipin: caipin) -> Bool in
            
            let nameMatch = caipin.name.rangeOfString(searchText,options: NSStringCompareOptions.CaseInsensitiveSearch)
            let LOCATIOnMatch = caipin.rest.rangeOfString(searchText,options: NSStringCompareOptions.CaseInsensitiveSearch)
            
            return nameMatch != nil || LOCATIOnMatch != nil
            
        })

首先要做的一点就是集成一个UISearchResultsupdating的接口：

class SecondViewController: UIViewController,UITableViewDatasource,UISearchResultsupdating

func updateSearchResultsForSearchController(searchController: UISearchController) {
        let searchText = searchController.searchBar.text
        
        filterContentForSearchText(searchText)
        
        tableView.reloadData()
    }

 func tableView(tableView: UITableView,numberOfRowsInSection section: int) -> Int {
        
            return searchResults.count
        
    }

func tableView(tableView: UITableView,cellForRowATindexPath indexPath: NSIndexPath) -> UITableViewCell {
        let identiString = "sCell" //代码复用
        let cell = tableView.dequeueReusableCellWithIdentifier(identiString,forIndexPath: indexPath) as searchTableViewCell
       
        var caipin =
        caipins[indexPath.row]
        if searchResults.count != 0
        {
            println(searchResults.count)
            caipin = searchResults[indexPath.row]
        }
        
        cell.nameLabel.text = caipin.name
        cell.scoreLabel.text = "评分:" + "\(caipin.score)"
        cell.restLabel.text = "餐馆:" + caipin.rest
        cell.priceLabel.text = "价格:" + "\(caipin.pricE)"
        cell.caipinImageView.image = UIImage(named: caipin.imagE)
        
        if caipin.collected == true {
            cell.shoucangImageView.image = UIImage(named: "heart_fill_28")
        }
        
        return cell
    }

最后一步，我们需要给viewDidLoad方法加入以下代码：

searchController.searchResultsupdater = self
        searchController.dimsBACkgroundDuringPresentation = false

另外更改一下搜索框中的水印文字：

searchController.searchBar.placeholder = "请输入菜品或餐馆"

快来运行看看效果吧。

回到搜索界面发现列表中已经没有东西了，在搜索框中输入一个“芳”：

可以看到菜品中和餐馆中包含“芳”字的结果都显示了出来！这就是swift的强大之处，只是用了很简单的代码就实现了这么好用的功能，快来试试吧。