Search Bar in iOS Applications

In iOS applications, we often need to filter data from a list using some keyword. For this purpose, Apple provides UISearchBar for users to search through a collection of items in the iOS app. It is a specialized view used to receive search-related information from the user, such as keywords.

In this article, we will discuss how we can use the search bar in iOS applications to implement search functionality for users. However, the search bar in iOS provides only the user interface; we need to implement any filtering logic according to our requirements.

Using UISearchBar

It is the most used way to implement search functionality in the iOS app. It is flexible to use UISearchBar in the iOS app if we have various other items on a screen like collection view, table view, or bar button items.

In simple words, the UISearchBar provides a text field for entering the search text, a search button as the right view of the text field, a bookmark button, and a cancel button. We need to conform to the UISearchBarDelegate protocol and implement the UISearchBar delegate methods to perform actions when the search text is entered in the search bar or buttons are clicked.

In swift, we use the UISearchBar class object to implement the search bar. The syntax of UISearchBar is given below.

The UISearchBar class includes the following properties to change the appearance inducing the event trigger delegates.

SN	Property	Description
1	var delegate: UISearchBarDelegate?	It represents the delegate object for UISearchBar. The view controller needs to conform to the UISearchBarDelegate protocol and implement its delegate methods.
2	var placeholder: String?	It represents the placeholder text shown in the search text field.
3	var prompt: String?	It represents a single line of text displayed at the top of the search bar.
4	var text: String?	It represents the search text used to search across the data list shown either in collectionview or tableview.
5	var barTintColor: UIColor?	It represents the tint color to be applied to the search textfield background.
6	var searchBarStyle: UISearchBar.Style	It represents the search bar style assigned among the values of UISearchBar.Style Enum.
7	enum UISearchBar.Style	It is an Enum type variable that represents whether the search bar has a background or not.
8	var tintColor: UIColor!	It represents the tint color to be applied to the key elements in the search bar.
9	var isTranslucent: Bool	It is a Boolean type property that is used to determine whether the search bar will be translucent or not.
10	var barStyle: UIBarStyle	It is an instance of enum type UIBarStyle, which specifies the search bar appearance.
11	enum UIBarStyle	It represents the stylistic appearance of different types of views.
12	var inputAssistantItem: UITextInputAssistantItem	It is the input assistant item that is used to configure the keyboard's shortcut bar.
13	var showsBookmarkButton: Bool	It is a Boolean type property that represents whether the bookmark button is shown in the search bar or not.
14	var showsCancelButton: Bool	It is a Boolean type property that represents whether the cancel button is shown in the search bar or not.
15	var showsSearchResultsButton: Bool	It is a Boolean type property that represents whether the search result button is shown in the search bar or not.
16	var isSearchResultsButtonSelected: Bool	It is a Boolean type property that represents whether the search results button has been selected in the search bar or not.
17	var scopeButtonTitles: [String]?	It is an array of strings that specifies the titles of the scope button.
18	var selectedScopeButtonIndex: Int	It represents the index of the selected scope button.
19	var showsScopeBar: Bool	It is a Boolean type property that represents whether the scope bar is shown in the search bar or not.
20	var backgroundImage: UIImage?	It is the background image shown in the UISearchBar.

The most important delegate methods used to trigger the user actions are given below.

SN	Method	Description
1	func searchBar(UISearchBar, textDidChange: String)	This method notifies that the user changed the search bar text.
2	func searchBarShouldBeginEditing(UISearchBar) -> Bool	It asks the delegate if the text in the specified range should be replaced with the given text.
3	func searchBarTextDidBeginEditing(UISearchBar)	This method notifies the delegate that the user begins editing the search text.
4	func searchBarShouldEndEditing(UISearchBar) -> Bool	It asks the delegate that editing should stop in the specified search bar.
5	func searchBarTextDidEndEditing(UISearchBar)	It notifies the delegate that the user has done editing the text in the search bar.

Example

Let's create the XCode project in which we will filter the data in tableview. For this purpose, create a project in XCode as SearchBarExample. Let's create the interface for the project in the Main.storyboard.

Interface builder

In the storyboard, first, add a search bar which will be at the top of the parent view. To add a search bar, start typing or browse for the search bar in the objects library, as shown below.

Now, align the search bar to the top of the view with leading and trailing assigned to 0 with the Super View. Now, add a tableView to the ViewController, which contains the list of data in the project.

Now, create the outlets for the search bar and table view in ViewController class.

ViewController.swift

As we are using UISearchBar and UITableView in this application, we need to conform our view controller to UISearchBarDelegate, UITableViewDelegate UISearchBarDataSource protocols. The ViewController has the following code to implement the search functionality in the project.

import UIKit


class ViewController: UIViewController {


    @IBOutlet weak var tableView: UITableView!
    @IBOutlet weak var searchBar: UISearchBar!
    
    var dataSourceArr = ["John", "David" ,"Mike", "Smith", "Josh", "Michhel", "Barac", "Donald"]
    var filteredArr = Array<String>()
    var searching:Bool?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        tableView.delegate = self
        tableView.dataSource = self
        searchBar.delegate = self
    }


}


extension ViewController : UITableViewDelegate {
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 80
    }
}


extension ViewController : UITableViewDataSource{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if(searching ?? false){
            return filteredArr.count
        }else{
            return dataSourceArr.count
        }
        
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell")!
        if(!(searching ?? false)){
            cell.textLabel?.text = dataSourceArr[indexPath.row]
        }else{
            cell.textLabel?.text = filteredArr[indexPath.row]
        }
       
        return cell
    }
}


extension ViewController : UISearchBarDelegate{
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        
        if(searchText.isEmpty){
            filteredArr = dataSourceArr
        }else{
            filteredArr = dataSourceArr.filter{$0.contains(searchText)}
        }
        searching = true
        tableView.reloadData()
    }
   
}

Next TopicUIImage in iOS

← prev next →