17 thoughts on “How to hide (and show) the UISearchBar in a UITableView”

1. I forgot to mention how to bring up the search bar with an IBAction, now that it’s hidden. All we need to do is associate an action with a button (say that nice looking loupe search logo in a navigation bar), then make the search bar the first responder:

   Objective-C

   - (IBAction)displaySearchBar:(id)sender { // makes the search bar visible [self.searchBar becomeFirstResponder]; }

   1 2 3 4 5

   - (IBAction)displaySearchBar:(id)sender {          // makes the search bar visible     [self.searchBar becomeFirstResponder]; }

   Reply

2. The goal can easily be accomplished with the help of setContentOffset of tableview. below is the code

   self.tableView.contentOffset = CGPointMake(0, self.searchDisplayController.searchBar.frame.size.height)

   Reply

   1. Thanks for sharing, Abdul – I’ll check it out!

      Reply

3. Better to place this code under – (void)viewDidLoad method
   as ViewDidAppear will cause the tableview to shift up every time you navigate to and from a child view.

   Reply

   1. Thanks David, very good tip – I’ve noticed that too. It’s not pretty indeed.

      Reply

4. iOS 7 Update

   Bringing up the search bar by making it the first responder no longer works in iOS 7: the cancel button won’t be responsive anymore. Instead, we can use this method:

   Objective-C

   - (IBAction)displaySearchBar:(id)sender { // make the search bar visible [self.tableView scrollRectToVisible:CGRectMake(0, 0, 1, 1) animated:YES]; NSTimeInterval delay; if (self.tableView.contentOffset.y >1000) delay = 0.4; else delay = 0.1; [self performSelector:@selector(activateSearch) withObject:nil afterDelay:delay]; } - (void)activateSearch { [self.tableView scrollRectToVisible:CGRectMake(0, 0, 1, 1) animated:NO]; [self.searchBar becomeFirstResponder]; }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   - (IBAction)displaySearchBar:(id)sender {       // make the search bar visible     [self.tableView scrollRectToVisible:CGRectMake(0, 0, 1, 1) animated:YES];          NSTimeInterval delay;     if (self.tableView.contentOffset.y >1000) delay = 0.4;     else delay = 0.1;     [self performSelector:@selector(activateSearch) withObject:nil afterDelay:delay];      }   - (void)activateSearch {     [self.tableView scrollRectToVisible:CGRectMake(0, 0, 1, 1) animated:NO];     [self.searchBar becomeFirstResponder];      }

   Thanks to Janos Homoki for this tip.

   Reply

5. Thanks million Jay!

   I have one issue if you can help me with it, when I click on the search button it will show the search bar but the cancel button won’t work and you will be stuck in the search bar, the reason that I can see I when I click the search button it won’t go to the top where the search bar is, instead it will show it where you stop in the table view, but when I scroll to the top and I click the search button everything works fine.
   Could you help me in this I really appreciate it.

   Reply

   1. I forgot to mention I am using the Xcode 5 for some reason all the problems came with it

      Reply

   2. Sorry for posting lots of comments, I just fixed the problem I discovered that i have two search bar declaration and didn’t know about it. now it is working fine all thanks to you!

      Reply

6. No problem Sal, the more comments the merrier! Glad you could sort it out, it’s not the easiest exercise I find.

   Considering that in jQuery Mobile it takes ONE additional parameter to create a searchable table view, such a basic feature is way to complicated in iOS.

   Reply

7. iOS 7 – Update #2

   I’ve noticed that when your table does not have a header, then the first cell will be slightly cropped at the top when the search controller is cancelled. There’s some new effect that makes this happen. It’s not noticeable when your table has a header, but if it does not it’s just plain annoying – and once again totally undocumented by Apple.

   To avoid this, let’s buffer the space above the first cell by setting a height for our non-existent header on iOS 7:

   Objective-C

   - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section { // iOS 7 hack - first cell would otherwise be cropped if (floor(NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_6_1) { return 0; } else { return 22; } }

   1 2 3 4 5 6 7 8 9

   - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {          // iOS 7 hack - first cell would otherwise be cropped     if (floor(NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_6_1) {         return 0;     } else {         return 22;     } }

   Note that this phenomenon does not seem to happen in my Demo Project – but I have noticed it on other custom projects where the height of table view cells is larger than the default. Just thought I’d mention it.

   Reply

8. iOS 7 – Update #3

   If you’re hiding the search bar from another view via an observer, iOS 7 shifts the cells of all views up that listen to the observer. I guess this is expected behaviour, and iOS 6 just didn’t do it. To avoid this, hide the search bar in iOS 7 as usual, and also scroll the table to the top position:

   Objective-C

   [self.tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:0] atScrollPosition:0 animated:YES];

   1	[self.tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:0] atScrollPosition:0 animated:YES];

   For completion, here’s the full method:

   Objective-C

   - (void)hideSearchBar { // scroll search bar out of sight CGRect newBounds = self.tableView.bounds; if (self.tableView.bounds.origin.y < 44) { newBounds.origin.y = newBounds.origin.y + self.searchBar.bounds.size.height; self.tableView.bounds = newBounds; } // new for iOS 7 [self.tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:0] atScrollPosition:0 animated:YES]; }

   1 2 3 4 5 6 7 8 9 10 11

   - (void)hideSearchBar {          // scroll search bar out of sight     CGRect newBounds = self.tableView.bounds;     if (self.tableView.bounds.origin.y < 44) {         newBounds.origin.y = newBounds.origin.y + self.searchBar.bounds.size.height;         self.tableView.bounds = newBounds;     }     // new for iOS 7     [self.tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:0] atScrollPosition:0 animated:YES]; }

   The fun never stops with iOS 7 does it…

   Reply

9. Thanks , U save my day, I was looking for days to solve this on ios7.

   Reply

   1. You’re very welcome 😉

      Reply

10. UPDATE 2014

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

    • http://pinkstone.co.uk/how-to-create-a-searchable-uitableview-2014/

    Reply

11. [self viewWillAppear:YES]; its not good

    Reply

    1. It was when I wrote this in 2013 😉 There’s an updated version of searchable table views for iOS 9 here: http://pinkstone.co.uk/how-to-create-a-searchable-uitableview-in-ios-9/

       Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.