After the implementation of part 3 of this series, we will add a search bar in this Swift JSON parser app to allow the user to search for the tracks that they like to play. This article will be shorter than other articles in this series of app development.

Code updates are here: https://github.com/kheniparth/TechMuzzJsonParser/pull/9/files

1) Add search bar to table view in our storyboard. Please make sure that it is directly under table view and not under cell, if it is then it will show a search bar under each cell in your table.

Make a delegate from your search bar to Table View controller by ctrl + click from search bar to Table View controller and choose Delegate from the options menu.

2) This time we also need to update something different than usual. We need to update the table view class to extend to UISearchbarDelegate so we can implement a search bar delegate method to handle search bar specific functions.

class TableViewController: UITableViewController, UISearchBarDelegate {

3) Add Searchbar outlet into the table view controller

@IBOutlet var searchBar: UISearchBar!

4) Below function would do everything for our search bar. Once user press search button or hit enter, it will grab the text and replace all spaces with “+” because we can’t append space into the URL and make a request to Spotify Web API. After then we append the updated text to our URL as a query parameter (q) and call callAlamo() function with updated searchUrl to make the request and rest of the feature would align accordingly.

5) This step is important because by this way we can clean the table view every time we search for something or else our program is set to append the search results to the current content of table view.

    self.posts.removeAll()
    self.tableView.reloadData()

6) That’s about it. 🙂 The final result would something look like this.

Feel free to share your queries that you face while implementing the above steps. We would be glad to help you.

Thank you and Stay Techie…