Skip to main content

Table Search Display Tutorial

This is what we want to achieve in this tutorial:

A table list with a search bar on top, and when we type on the search bar, the table updates its list.

Prerequisite in learning this tutorial is a knowledge in creating table views. If you still don't know how to make table views, refer to the old tutorials.  (http://iosmadesimple.blogspot.com/2012/10/adding-uitableview-tutorial.html)

1. Create a New Xcode project, choose a Single View Application template.

I'm using the latest Xcode up to date, so you may see a longer UIView in our xib file (for iPhone 5 devices). But if you want the old UIView size, you may change it by choosing Retina 3.5 Full Screen on the Simulated Metrics (right panel of the image above).

2. Look for "Search Bar and Search Display Controller" in Objects Library and drag it to our UIView.


3. Set up the table, the list of items, implementation of the delegate and datasource methods of tableview and everything else. If you have no idea how, follow this tutorial about adding UITableView. (http://iosmadesimple.blogspot.com/2012/10/adding-uitableview-tutorial.html)

4. Add this to your interface header, together with your UITableViewDataSourceUITableViewDelegate:

UISearchDisplayDelegate, UISearchBarDelegate

5. We need to add two more variables:
A boolean variable that will tell us if the user is currently searching;
and a mutable array where we can put the filtered list when the user is searching.

BOOL isSearching;

NSMutableArray *filteredList;

6. Set the boolean variable to NO, and allocate and initialize the filteredList in our viewDidLoad function:
isSearching = NO;
filteredList = [[NSMutableArray alloc] init];

7. Create a method that will add an object to our filteredList according to the string typed by the user.

- (void)filterListForSearchText:(NSString *)searchText
{
    [filteredList removeAllObjects]; //clears the array from all the string objects it might contain from the previous searches
    
    for (NSString *title in list) {
        NSRange nameRange = [title rangeOfString:searchText options:NSCaseInsensitiveSearch];
        if (nameRange.location != NSNotFound) {
            [filteredList addObject:title];
        }
    }
}


8. Implement the search display delegate methods.
#pragma mark - UISearchDisplayControllerDelegate

- (void)searchDisplayControllerWillBeginSearch:(UISearchDisplayController *)controller {
//When the user taps the search bar, this means that the controller will begin searching.
    isSearching = YES;
}

- (void)searchDisplayControllerWillEndSearch:(UISearchDisplayController *)controller {
//When the user taps the Cancel Button, or anywhere aside from the view.
    isSearching = NO;
}

- (BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchString:(NSString *)searchString
{
    [self filterListForSearchText:searchString]; // The method we made in step 7
    
    // Return YES to cause the search result table view to be reloaded.
    return YES;
}

- (BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchScope:(NSInteger)searchOption
{
    [self filterListForSearchText:[self.searchDisplayController.searchBar text]]; // The method we made in step 7
    
    // Return YES to cause the search result table view to be reloaded.
    return YES;
}

9. Update our tableview method numOfRows: and cellForRow:
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    if (isSearching) { 
        //If the user is searching, use the list in our filteredList array.
        return [filteredList count];
    } else {
        return [list count];
    }

- (UITableViewCell *)tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    
    UITableViewCell *cell = [aTableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
    }
    
    // Configure the cell...
    NSString *title;
    if (isSearching && [filteredList count]) {
        //If the user is searching, use the list in our filteredList array.
        title = [filteredList objectAtIndex:indexPath.row];
    } else {
        title = [list objectAtIndex:indexPath.row];
    }
    
    cell.textLabel.text = title;
    
    return cell;
}

10. Hit Run and your search display controller is done!

Comments

  1. This comment has been removed by the author.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Hey Jenn, thanks for this tutorial! I compiled a list of some top tutorials on how to implement a search bar in the UITableView. Hope other developers find this useful too :)
    http://www.verious.com/board/Giancarlo-Leonio/implementing-an-ios-search-bar-in-table-view/

    ReplyDelete
  4. Hi Jenn,
    Nice Tutorial, and easy way to implement the searchbar ,
    But i have a situation
    I am having a tableview with a two text labels in each tableviewcell.
    So now i have to search the any text label and have reload the tableview.
    For Example in my tableView,
    the tableViewcell having Text label and Right Detail text label also.
    SO, here how to search these to labels and to be viewed in TableView.
    Pls reply as soon as possible....

    ReplyDelete
  5. Thanks for sharing such great information
    http://quincetravels.com

    ReplyDelete

Post a Comment

Popular posts from this blog

Blocks in Web Service Functions

Hi Everyone! It has been a very long while since I last posted in this blog. This time, I will be making a tutorial in using blocks when we are accessing our API or web services. Disclaimer: I am also not that 'expert' when it comes to blocks. But I have learned this method throughout my career as an iOS Developer. This is a combination of what I learned from my senior teammates. By the way, I am using the AFNetworking Framework. Set up... 1. Create a singleton-patterned APIClient class which is a subclass of AFHTTPClient. 2. Our APIClient interface file should look like this... #import <Foundation/Foundation.h> #import   "AFHTTPClient.h" @interface  APIClient : AFHTTPClient + ( APIClient *)sharedClient; @end 3. And in our implementation file: #import   "APIClient.h" #import   "Constants.h" @implementation GCAPIClient /** We usually have our Development and Production API links, right? So to cate

UISplitViewController Landscape

Tutorial Request from Mazrizan Kamisan We'll have the portrait view in another tutorial which will be a continuation of this landscape tutorial of UISplitViewController. /* Note: This works in OS versions greater than or equal to iOS 6.0 OS versions less than iOS 6.0 has a different look in its UIPopoverController and doesn't support Landscape Orientation.*/ I studied UISplitViewController by creating a Master Detail Application Template. For sure, you will also be able to understand by looking at its code. For those who want to do it themselves (not just merely creating a Master Detail Application), just follow this tutorial. 1. Create an Empty Application Template. Select iPad for our Device Family. 2. Add a New File, subclass of UITableViewController, check "With XIB for user interface." This is the view on the left area of our application. 3. Create another File, subclass UIViewController. This is for the bigger area (right panel) of our appli