So you have got an iPhone app displaying a table, say in RootViewController class, and you now want to add a cool search bar to the top section of the table, such as the one you see in the Contacts app of the iPhone? It isn’t hard, 5 hours ago I had no clue how to do this, but now I can say its quite easy.
What you need to do is add a new variable to your RootViewController.h, or to any other class header derived from UITableViewController and displaying your table:
@property (nonatomic, retain) UISearchBar *mySearchBar;
@property (nonatomic, assign) BOOL bSearchIsOn;
I also added another variable – bSearchIsOn, a Boolean that will hold a YES value indicating that our UISearchBar is displayed. We will set to NO as default value in viewDidLoad method. Here is our viewDidLoad method code:
mySearchBar = [[UISearchBar alloc] init];
mySearchBar.placeholder = @"Type a search term";
mySearchBar.tintColor = [UIColor blackColor];
mySearchBar.delegate = self;
self.bSearchIsOn = NO;
Note that we set our delegate to self, i.e: our RootViewController class will handle calls related to our Search Bar. Also note that we had added the protocol UISearchBarDelegate to our RootViewController.h file so we can properly define our class as a UISearchBarDelegate protocol handler.
Now that we have our UISearchBar defined we need to make sure we display it upon a click of a search button. To do this, we need to add a few more lines of code to viewDidLoad method in order to display a clickable Search button that will show and hide our Search Bar. We can add these lines of code before or after our UISearchBar alloc & init section displayed above.
initWithBarButtonSystemItem: UIBarButtonSystemItemSearch target:self action:@selector(searchBar:)];
bi.style = UIBarButtonItemStyleBordered;
self.navigationItem.rightBarButtonItem = bi;
We now need to make sure we define a searchBar method as we stated above that clicking the button will invoke an action @selector(searchBar:). So here it goes:
bSearchIsOn = ! bSearchIsOn;
self.tableView.tableHeaderView = mySearchBar; // show the search bar on top of table
self.tableView.tableHeaderView = nil;
[mySearchBar resignFirstResponder ];
[self.tableView scrollRectToVisible:[[self.tableView tableHeaderView] bounds] animated:NO]; // scroll to top so we see the search bar
We now need to define searchBarSearchButtonClicked which will get called once the “Search” button will be clicked on the pop-up keyboard window.
int len = [ [mySearchBar.text stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]] length];
if (len > 2)
[ mySearchBar resignFirstResponder ];
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:UI_ALERT_MESSAGE_VIEW__CAPTION
message:@"Search term needs to be at least 3 characters in length."
Here we simply check that the search term is at least 3 characters in length and if so, call the searchTableView method. searchTableView is the function that actually performs the search, it can do whatever, either search on the table itself (locally) by displaying only rows matching the search criteria or by POSTing data to a remote server asking to perform a search on the server, getting the results of the search and displaying those in a new UITableView that we will push and display once results are received. This part depends on the type of search you want to perform and is up to your iPhone app needs and logic. In any case, here is how searchTableView will look like:
NSString *searchText = _mySearchBar.text;
if ([searchText length] > 0)
// do the actual search....
Hope you got it! if you have any questions or comments or if you just found this code useful, please drop me a line or two. I will love to hear from you and help you out.
No related posts.