iOS UISearchController with UITableView With Examples [Latest]

UISearchController

UISearchController contains a protocol UISearchResultsUpdating which informs our ViewController class through the function given below whenever text in the UISearchBar is changed.

func updateSearchResults(for searchController: UISearchController)

In the following application, we’ll use a TableViewController as the default view controller type and add a UISearchController at the top of it programmatically(UISearchController is not available in the Interface Builder). We’ll be using a TableViewCell of the style Subtitle which contains a title and a description in each row that would be populated using a Model class.

iOS UISearchController Example Project Structure

Storyboard

UISearchController example code

Create a new file Model.swift that stores the data for each row.

The ViewController.swift source code is given below.

Pheww! That’s a big code. Let’s understand this step by step.

1. The ViewController class implements UITableViewController. So there’s no need to implement the Delegate and DataSource protocols separately
2. The models array would contain the data for all the rows. The filteredModels array would contain the data for the rows that match the searched term based on the condition we’d be setting
3. The line that initialises the UISearchController is:
   
   let searchController = UISearchController(searchResultsController: nil)

   1 2 3

   let searchController = UISearchController(searchResultsController: nil)

   
   By setting the searchResultsController to nil we state that the search results would be updated in the current TableViewController itself rather than a different View.
4. To get rid of the empty rows we call:
   
   self.tableView.tableFooterView = UIView()

   1 2 3

   self.tableView.tableFooterView = UIView()

5. • Let’s setup a few features on the SearchController.
     
     func setupSearchController() { definesPresentationContext = true searchController.dimsBackgroundDuringPresentation = false searchController.searchResultsUpdater = self searchController.searchBar.barTintColor = UIColor(white: 0.9, alpha: 0.9) searchController.searchBar.placeholder = "Search by movie name or genre" searchController.hidesNavigationBarDuringPresentation = false tableView.tableHeaderView = searchController.searchBar }

     1 2 3 4 5 6 7 8 9 10 11

     func setupSearchController() {         definesPresentationContext = true         searchController.dimsBackgroundDuringPresentation = false         searchController.searchResultsUpdater = self         searchController.searchBar.barTintColor = UIColor(white: 0.9, alpha: 0.9)         searchController.searchBar.placeholder = "Search by movie name or genre"         searchController.hidesNavigationBarDuringPresentation = false         tableView.tableHeaderView = searchController.searchBar     }

     
     By setting definesPresentationContext to true we ensure that the search controller is presented within the bounds of the original table view controller.
   • searchResultsUpdater conforms to the UISearchResultsUpdating protocol. Setting this makes sure that the updateSearchResults function present in the extension would be invoked everytime text in searchBar changes.
6. The TableView cellForRowAt and numberOfRowsInSection display the relevant data from the filteredModels or models class if the searchBar has some text or not.
7. The filerRowsForSearchedText function is invoked every time text changes inside the method updateSearchResults.
   
   func filterRowsForSearchedText(_ searchText: String) { filteredModels = models.filter({( model : Model) -> Bool in return model.movie.lowercased().contains(searchText.lowercased())||model.genre.lowercased().contains(searchText.lowercased()) }) tableView.reloadData() }

   1 2 3 4 5 6 7 8

   func filterRowsForSearchedText(_ searchText: String) {         filteredModels = models.filter({( model : Model) -> Bool in             return model.movie.lowercased().contains(searchText.lowercased())||model.genre.lowercased().contains(searchText.lowercased())         })         tableView.reloadData()     }

   
   In the above function, we filtered the models array and copy only those elements into filteredModels which are a substring of the models.movie or models.genre class.
8. In the above code, the part inside the filter method has a different syntax. It’s called a closure.
   
   {( model : Model) -> Bool in return model.movie.lowercased().contains(searchText.lowercased())||model.genre.lowercased().contains(searchText.lowercased()) }

   1 2 3 4 5

   {( model : Model) -> Bool in             return model.movie.lowercased().contains(searchText.lowercased())||model.genre.lowercased().contains(searchText.lowercased())         }

   
   filter() takes a closure of type (model: Model) -> Bool and iterates over the entire array, returning only those elements that match the condition.

What are closures?

Closures are sort of anonymous functions without the keyword func. The in keyword is used to separate the input parameters from the return part.

An example of closures is:

The input parameters are Int followed by -> and the return type again an Int.

We can call a closure similar to the way we call functions.

The output of the above application in action is below.

This brings an end to this tutorial. You can download the iOS UISearchController example project from the link given below.

Reference: Official Documentation