How to create a searchable UITableView

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


Further Reading


I’ve just finished recording a screencast that demonstrates how to do this here:

One thought on “How to create a searchable UITableView

  1. Note on iOS 5 Compatibility

    In iOS 5 the UISearchDisplayController doesn’t work when dragged in to the storyboard. Instead, drag a standard UISearchBar into your table view and create an outlet, just like we did earlier. If you’ve already added a seach display controller you have to remove it, then connect the new search bar to the existing outlet.

    In addition, we need to setup a new property for the search display controller manually.

    Back in our h file:

    @property (strong, nonatomic) UISearchDisplayController *controller;

    Next we’ll revisit the viewDidLoad method and instantiate our new property. We’ll also tie it to our search bar and set the delegate and data source. Here’s the entire method, iOS 5 style:

    - (void)viewDidLoad
        [super viewDidLoad];
        [self createData];
        self.searchResults = [[NSMutableArray alloc]init];
        // needed for iOS 5
        // in iOS 6 we can use the UISearchDisplayController in the storyboard and don't need this setup
        self.controller = [[UISearchDisplayController alloc]initWithSearchBar:self.searchBar contentsController:self];
        self.controller.searchResultsDataSource = self;
        self.controller.searchResultsDelegate = self;

    This should do the trick!

Leave a Reply