Scopes in UISearchController
Hello, in this blog we will learn how to add scopes in the search bar. By Default, UISearchController (i.e a view controller which displays search result based on the interaction with a search bar) only provide a text field for you. Adding Scopes provide you the features of filter the result based on certain conditions. Now, let’s start implementing scopes in UISearchController. We are going to create a list of Hogwarts Students and Filter them using Scopes on the basis of their Houses.
Scopes Implementation
Firstly, Create an object of UISearchController in your ViewController.
|
1 |
private let searchController = UISearchController(searchResultsController: nil) |
Secondly, Extends the UISearchBarDelegate and UISearchResultsUpdating delegates in your View Controller.
|
1 |
extension ViewController : UISearchBarDelegate, UISearchResultsUpdating |
Now, add the search bar of your UISearchController to your tableView Header.
|
1 |
tableView.tableHeaderView = searchController.searchBar |
Now, We need to provide the list for the scope and also we need to confirm the delegate of the search bar.
|
1 2 |
searchController.searchBar.scopeButtonTitles = ["Gryffindor", "Slytherin", "Ravenclaw", "Hufflepuff"] searchController.searchBar.delegate = self |
Finally, you need to override the selectedScopeButtonIndexDidChange methods. This method called when you select any option from the list shown in the scope. You can also get the current index of selected item via selectedScopeButtonIndex property of UISearchBar or via selectedScope parameter.
|
1 2 3 4 |
func searchBar(_ searchBar: UISearchBar, selectedScopeButtonIndexDidChange selectedScope: Int) { print(selectedScope) print(searchBar.selectedScopeButtonIndex) } |
Now, When you click on searchbar you will see the scope list as shown in the below image.
Now, let complete the application by implementing the rest of the methods.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
class ViewController: UIViewController { var wizards = [Wizard]() private var filterdWizards: [Wizard] = [] ... override func viewDidLoad() { super.viewDidLoad() createWizard() setUpTableView() searchController.searchBar.scopeButtonTitles = Wizard.House.allCases.map { $0.rawValue } searchController.searchBar.delegate = self } .... } extension ViewController: UITableViewDataSource { func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { filterdWizards.count } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: WizardListCell.IDENTIFIER, for: indexPath) as? WizardListCell cell?.label.text = filterdWizards[indexPath.row].name return cell! } } extension ViewController : UISearchBarDelegate, UISearchResultsUpdating { func searchBar(_ searchBar: UISearchBar, selectedScopeButtonIndexDidChange selectedScope: Int) { let indx: Wizard.House = Wizard.House.allCases[searchBar.selectedScopeButtonIndex] filterdWizards = wizards.filter { $0.house == indx } tableView.reloadData() } func searchBarCancelButtonClicked(_ searchBar: UISearchBar) { filterdWizards = wizards tableView.reloadData() } } // Wizard Model struct Wizard { var name: String var house: House enum House: String, CaseIterable { case Gryffindor, Slytherin, Ravenclaw, Hufflepuff } } |
Thank you for reading this article. If you want to read more articles regarding iOS Development click here or if you want to learn more about UISearchController then click here.