iOS Tutorials: Search your table using a SearchBar

SWIFt 4.2 | xcode 10

OVERVIEW

When there is too many datas involved, it could get pretty tricky especially in looking for that specific data. This is where SearchBar came in pretty handy typing the specific keywords and the intended data will appear. It does increase your user experience in my opinion.

DESIGNING YOUR STORYBOARD

When designing your own storyboard, you could either do it programmatically or drag and drop with the storyboard. In case you are using storyboard, some of the objects used here are:

  1. Search Bar
  2. Table View
  3. Table View Cell

And don’t forget to connect the object above to your class and remember to conform the following protocol – UISearchBarDelegate & UITableDataSource. You may use more if the needs arise but for this tutorial, we will only be using this two.

CREATING THE BASIC SEARCH BAR COMPONENTS

You will need a new array to contain your search result. In my case, I just create an empty array

var filteredData = [String]()

And we will be creating a new flag here to know if the use tap on the Search Bar or not. When the user tap on the Search Bar, we toggle it to true and vice versa but by default, we want it to be false.

var isSearching = false

And of course, after conforming the protocol and creating your @IBOutlet as mentioned in the steps above, you have to declare connect it to your viewcontroller.

searchBar.delegate = self
tableView.dataSource = self

CONFIGURING TABLE VIEW FOR YOUR SEARCH BAR

Remember the flag that we created previously to keep track of the Search Bar? It comes pretty handy in the Table View. When it comes to showing numberOfRowsInSection, we want to only show the data accordingly. Now if the user type on the search bar, we want it to show their result and not our current data.

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if isSearching {
            return filteredData.count
        } else {
            return data.count
        }
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        if isSearching {
            cell.textLabel?.text = filteredData[indexPath.row]
        } else {
            cell.textLabel?.text = data[indexPath.row]
        }
        return cell
    }

CONFIGURING YOUR SEARCH BAR

This is the most important function of all as it determines the flag isSearching. When the user tap on the search bar and start typing, we know they are using the search bar so we toggle it to true. With that, we stored the value into the filteredData created earlier and only showing that particular data.

    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        if searchBar.text == "" {
            isSearching = false
            tableView.reloadData()
        } else {
            isSearching = true
            filteredData = data.filter({$0.contains(searchBar.text ?? "")})
            tableView.reloadData()
        }
    }

Your result will be as followed and you could always download the project from Github

  • Article By :
    Founder of DaddyCoding. Studied Computer Science, Information System and Information Technology at BYU-Hawaii. Currently spending most of my time researching and learning on helping to expose making iOS apps.

Random Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*