UISearchBar with hidden TableView on NavigationBar

Question

I am trying to create a view with a searchBar on the NavigationBar, I want this searchBar to open a tableView with the search results as soon as typing begins, and hide it once an item is touched. I am new to this platform, so I need just a path to follow, I don't know where to start actually.

I tried, but the tableView associated stays on top of the rest of the view, and I want it hidden until search — João Miranda, Dec 06 '14 at 01:45
It's very easy actually. Although UISearchController is the way to go. The way around it is adding a search bar to your tableviewheader and set your tableviews content offset the height of your search bar. — soulshined, Dec 06 '14 at 02:51
Mind you, by programmatically inserting it the way you want you will have to do all the other views by code as well. You will have to populate the tableview that displays search results from the text users insert. That's way UISearchController is the way to go. — soulshined, Dec 06 '14 at 02:53

score 1 · Answer 1 · answered Dec 06 '14 at 02:50

You can create a view with a UISearchBar at the top and then a UITableView (initially hidden) and add that to your existing view. Hiding the Navigation bar will given the same appearance as UISearchController. You can then show the table view in the search bar delegates when the user starts searching.

soulshined · Accepted Answer · 2014-12-06T17:56:29.950

According to my comment: Heres a more in depth explanation. Happy coding:

.h

@interface TableViewController : UITableViewController <UISearchBarDelegate>

@property (strong, nonatomic) UISearchBar *searchBar;

@end

.m

- (void) viewDidLoad:(BOOL)animated {

UIView *searchbarView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 44)]; //This adds a container that will hold the search bar. 
self.searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 44)]; 
self.searchBar.delegate = self;
[searchbarView addSubview:self.searchBar];
self.tableView.tableHeaderView = searchbarView; //Inserts UIView into the header of self.tableView
[self.tableView setContentOffset:CGPointMake(0, 44)];
}

And thats pretty much it. If you want to customize other things like the keyboard layout and the way text populates and the color and font and placeholder text etc, you can edit it in viewDidLoad or make a subclass

EDIT I have included some example code for customization below:

self.searchBar.keyboardAppearance = UIKeyboardAppearanceDark;
self.searchBar.returnKeyType = UIReturnKeySearch;
self.searchBar.searchBarStyle = UISearchBarStyleProminent;
self.searchBar.barTintColor = [UIColor lightGrayColor];
self.searchBar.placeholder = @"Search for queries here";
self.searchBar.showsCancelButton = YES;
[[UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                                                              [UIColor blueColor],
                                                                                              NSForegroundColorAttributeName,
                                                                                              nil]
                                                                                    forState:UIControlStateNormal];

-(void)searchBarCancelButtonClicked:(UISearchBar *)searchBar {
self.searchBar.showsCancelButton = NO;
[self.searchBar resignFirstResponder];
}

UISearchBar with hidden TableView on NavigationBar

2 Answers2

Linked