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.

       private let searchController = UISearchController(searchResultsController: nil)

1	private let searchController = UISearchController(searchResultsController: nil)

Secondly, Extends the UISearchBarDelegate and UISearchResultsUpdating delegates in your View Controller.

       extension ViewController : UISearchBarDelegate, UISearchResultsUpdating

1	extension ViewController : UISearchBarDelegate, UISearchResultsUpdating

Now, add the search bar of your UISearchController to your tableView Header.

      tableView.tableHeaderView = searchController.searchBar

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.

     searchController.searchBar.scopeButtonTitles = ["Gryffindor", "Slytherin", "Ravenclaw", "Hufflepuff"]
     searchController.searchBar.delegate = self

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.

    func searchBar(_ searchBar: UISearchBar, selectedScopeButtonIndexDidChange selectedScope: Int) {
        print(selectedScope)
        print(searchBar.selectedScopeButtonIndex)
    }

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.

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
    }
}

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.

siddhant kumar 24 March 2021

. . .

Scopes in UISearchController

Scopes in UISearchController

Scopes Implementation

Now, let complete the application by implementing the rest of the methods.

Leave a Comment Cancel Reply

Message Sent!