Geek@Paris

A simple tutorial of UISearchDisplayController (iOS 3-7)

2010-02-25

After several years, thanks to StoryBoard and iOS 7, it becomes super easy to use Search Display Controller now.
I attached a new sample project here, hope it could help everyone who needs it.

SearchDisplayControllerDemo

UISearchDisplayController iOS 7

I find out that, the API for UISearchDisplayController in SDK 3.0b is different from 3.0. And there’s no sample code for UISearchDisplayController anywhere else until now. (Yes, there is one in Apple’s sample code web page, but it uses Interface Builder to realize it. And there is one from the source code of “three20”, but it’s based on SDK 3.0b. )

So I wrote this sample based on “Table Search” sample code.It realizes UISearchDisplayController programmatically without Interface Builder. It supports landscape screen and search scopes, and integrate one UITabBarController with two UITableViewControllers.

Here is the tutorial.

@interface

  1. Declare an instance of UISearchDisplayController and set as property.
  2. Prepare two arrays to hold original data and filtered data.

@implementation

  1. Set up viewDidLoadmethod
    1. Create an UISearchBar.
    2. Initialize the UISearchDisplayController based on the UISearchBar:
      1
      
      [[UISearchDisplayController alloc] initWithSearchBar:mySearchBar contentsController:self];
    3. Set the UISearchDisplayController instance:
      1
      2
      3
      
      [self setSearchDisplayController:searchDisplayController];
      [searchDisplayController setDelegate:self];
      [searchDisplayController setSearchResultsDataSource:self];
  2. Set up UISearchDisplayController delegate methods:
      1
      2
      3
      
      - (BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchString:(NSString *)searchString
      - (BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchScope:(NSInteger)searchOption
      - (void)searchDisplayControllerDidBeginSearch:(UISearchDisplayController *)controller

      Be careful, we need to set the delegate for self.searchDisplayController.searchResultsTableView each time we begin to search. Because the instance of searchResultsTableView is allocated and released automatically.

  3. Set up UITableView data source and delegate methods, we distinguish filtered or not filtered table by
      1
      
      if (tableView == self.searchDisplayController.searchResultsTableView)
  4. Remember to return YES in shouldAutorotateToInterfaceOrientation to support landscape screen.


Some details need to be cared:

  1. self.searchDisplayController.searchResultsTableView is created and release automatically, so its delegate should be setted each time it’s created.
  2. Every time we turn to a landscape UITableViewController, the UISearchBar in the tableHeaderView has only a width of 320 even we have already setted sizeToFit. It’s may be caused by UITabBarController, I don’t know. So I set the frame of tableHeaderView based on the screen orientation manually in the viewDidLoad method.

Sample Code(.zip)
Or get the project from GitHub : CBSearchDisplayControllerSample

Author:admin | Categories:Dev | Tags:

18 Comments

  1. mo nigeria says:

    hey any idea how to remove that gray overlay (like from the first picture).

    Clicking the search bar automatically grays-out the table underneath.

    I would like to make it transparent — if at all possible….

    • admin says:

      Hi,

      I don’t know if we can make it transparent, but at least we can use the same datasourse and cells of the original content table for searchResultsTableView at the beginning of searching, and scroll to the same position as the original table, so they will look the same.

      Not tested yet.

  2. evan says:

    maybe a lil correction about the date you post this tutorial, its says 2010-02-25, whereas your article include an iOS 7 :) thanks, great tutorial

  3. Robson says:

    Perhaps you can help me. I’m trying to put the SearchDisplayController’s SearchBar into the titleView of a NavigationItem. When I do that, the search doesn’t work. The TableView doesn’t show, the cancel button doesn’t show. Do you know how to fix that? I’m trying to do that in iOS 7.

    Thank you

    • admin says:

      Hello,
      In iOS 7, to use Search Bar in a navigation bar, you only need to do 2 things:
      1st, in Storyboard, link your searchBar to the navigationItem’s titleView.
      2nd, [self.searchDisplayController setDisplaysSearchBarInNavigationBar:YES];
      Hope it helps :)

  4. Krishnan says:

    This helped me thanks.

  5. Rufus says:

    thanks a lot! its working. But i have a question. Can you show; how to set up our plist file? i have a plist file and wanna search functionality. but i couldnt do. Thanks.

  6. brian says:

    Thanks a lot. Saved me a lot of time.

  7. rupesh rajopadhyaya says:

    thanx

  8. Milton says:

    Perfect!

  9. Mohsin J says:

    Found solution though :) using NSRange

    NSRange range = [product.name rangeOfString:searchText options:NSCaseInsensitiveSearch];
    if (range.location != NSNotFound)
    {
    [self.filteredListContent addObject:product];
    }
    }

  10. Mohsin J says:

    hi,
    worked for me as well
    but it search only first letter as search string :)

  11. Eric says:

    I’m having trouble implementing this. Would it be possible to post the code?

  12. This was exactly what I was looking for…all the tutorials and Apple Sample code I found used UISearchDisplayController with Interface builder and not programmatically…

    Thanx!

Leave a Reply

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


Clickcha - The One-Click Captcha