The ingredients for a search function in a UITableView are more involved than just displaying a simple search field. First we need the standard UITableView. Next we need a UISearchBar which can be added to the top of the table view. But displaying the actual search results is something called the UISearchDisplayController.
This process isn’t very well documented from what I could find, so here’s how I did it successfully. Works fine in iOS 6.
For iOS 5 compatibility please see my comment at the end.
An updated version for iOS 7 is also available. I’ve recorded a screencast about this here:
This new controller “switches out” the standard table view and overlays a new one (the search display). Since the data for the search view is more or less the same as what was already powering the original table view (only “filtered”), the search view often uses the same data source as the original table view.
Speaking of filtering the original data: this is done with something called a predicate (NSPredicate). First time I’ve heard of this was in regards to Core Data. A predicate is a rather powerful yet mysterious thing and rest assured you don’t need to understand it in order to use it.
Let’s go through this step by step: from creating a standard table view with some dummy data, then adding a search function and slowly making it work.
Creating the Table View
I’ll start with a Single View Application project (with Storyboards and ARC selected), removing the single View Controller from the Storyboard. Delete both ViewController h and m files too.This content is for members only.
Run the app to see all our values listed as expected.
We’re not dealing with selecting them, but we’ll see next how we can make the view change into search mode.
Bring on the big Search Bar
This is where things get interesting: back in the storyboard, drag a UISearchDisplayController to the very top of your table view, so that it sits above the dummy cell. Switch to Assistant Editor mode and control drag a reference into your h file so we can address this thing.
Notice that when you do this you will only be able to create an outlet to a UISearchBar – that’s fine, it’s part of the UISearchDisplayController. Call it searchBar.
Setting up our Predicate
Back in the TableViewController.m file we need to add a couple of helper methods. The first one is a method called filterData. We will call this repeatedly so a small method will work best for us:This content is for members only.
Leaving this out makes the table view crash as soon as you hit a letter. For some reason cells don’t automatically create themselves as needed, which works fine in a standard table view. So if there aren’t any, we just create as many as needed.
Full Project Code
You can get the entire project on my repository on GitHub: Table Search 2013
- TableSearch – Apple’s Demo Code, last updated in 2010 and features iOS 4, does not make use of predicates (at the time of writing)
- Predicates Programming Guide
- UISearchDisplayController Class Reference
I’ve just finished recording a screencast that demonstrates how to do this here: