UISearchBar in navigationbar

ios uinavigationbar uisearchbar

71,778

Solution 1

To put searchBar into the center of navigationBar:

self.navigationItem.titleView = self.searchBarTop;

To put searchBar to the left/right side of navigationBar:

UIBarButtonItem *searchBarItem = [[UIBarButtonItem alloc] initWithCustomView:searchBar];
self.navigationItem.rightBarButtonItem = searchBarItem;

Solution 2

As of iOS 7, the UISearchDisplayController supports this by default. Set the UISearchDisplayController's displaysSearchBarInNavigationBar = YES to get this working easily.

Per the documentation:

Starting in iOS 7.0, you can use a search display controller with a navigation bar (an instance of the UINavigationBar class) by configuring the search display controller’s displaysSearchBarInNavigationBar and navigationItem properties.

Solution 3

As one commenter noted, using searchDisplayController.displaysSearchBarInNavigationBar = true ends up hiding any existing left/right bar button items.

I've found two different ways of adding a searchBar to a navigationBar using iOS7's new property on searchDisplayController.

1) Nib Based Approach

If you're using a .xib, you can set a User Defined Runtime Attribute for this value and for whatever reason, the leftBarButtonItem stays in tact. I have not tested it with a rightBarButtonItem.

enter image description here

2) Code (Timing Matters)

If you want to implement in code, timing seems to matter. It seems that you must add the searchBar to the navigationBar first, then set your barButtonItem.

- (void)viewDidLoad
{
    ...
    self.searchDisplayController.displaysSearchBarInNavigationBar = true;
    self.navigationItem.leftBarButtonItem = [UIBarButtonItem new];
    ...
}

Solution 4

Check out Apple's UICatalog sample code. It shows how to use the new UISearchController in three different ways: modally, in nav bar, and below the navigation bar.

Solution 5

Objective C code snippet for UISearchBar in NavigationBar

- (void)viewDidLoad {
    UISearchController *searchController = [[UISearchController alloc] initWithSearchResultsController:nil];
    
    if (@available(iOS 11.0, *)) {
        self.navigationItem.searchController = searchController;
    } else {
        self.navigationItem.titleView = searchController.searchBar;
    }
}

Samui

Updated on July 09, 2022

Comments

Samui almost 2 years

How can I show a UISearchBar in the NavigationBar?

I can't figure out how to do this.

Your help is very much appreciated.
NLemay almost 11 years

According the Apple's docs, it looks like we can't set the searchBar in the titleView. Am I right? Can you show us how you set the navigationItem of the searchDisplayController? Thank you
JED HK over 10 years

I have the problem that on iPad the results are shown in a table view embedded in a popover, instead of in the frame of the original table view. Any solution to this?
Van Du Tran over 10 years

I tried this but my search bar is in the middle of the screen!
Bohrnsen over 10 years

The easiest way when using Storyboards is to drag a Search Bar and Search Display Controller out of the Utility Area into the bottom of the current scene inside Document Outline. After that just add self.searchDisplayController.displaysSearchBarInNavigationBa‌r = YES; in viewdidload. You may want to show a cancel button or hide the backbutton while editing so this could be done in the delegate implementation.
fishinear over 10 years

This makes the search bar occupy the whole navigation bar, hiding any existing leftbar and rightbarbuttons. How can I still keep those?
djibouti33 over 10 years

@fishinear, check out the answer i just posted on how to add a searchdisplaycontroller to your navigation while maintaining the left/right bar button items.
Van Du Tran over 10 years

I tried (1) in storyboard and it crashes. this class is not key value coding-compliant for the key displaysSearchBarInNavigationBar.'
Shmidt over 10 years

@VanDuTran I had this issue when I assigned searchbar to tableview header, when I removed I've got another problem — search results table view shows only on first search.
Peter about 10 years

You can do it in a StoryBoard, but you need to set it on the Search Display Controller, not on the View Controller; however, it doesn't preserve the right button item in my test, but it does put the search bar in the navbar.
Peter about 10 years

You can use #2 with UIBarButtonItems setup in a StoryBoard that have a referencing outlet. Instead of [UIBarButtonItem new] above do: self.navigationItem.leftBarButtonItem = self.leftButton (where self.leftButton is the outlet for the left button).
jdev over 9 years

If I set it like this, the searchDisplayController doesn't show up anymore. The cellForRowAtIndexPath: method isn't called either. With searchDisplayController.displaysSearchBarInNavigationBar works but I can't use it because I'm supporting iOS 6 too...
fatuhoku about 9 years

It appears that SearchDisplayController had been deprecated since iOS 8.0.
Grimxn over 8 years

Ray Weinerlich has a good tutorial on this raywenderlich.com/113772/uisearchcontroller-tutorial
Panos over 7 years

This approach hides the title
Okhan Okbay almost 7 years

These samples helped me incredibly much. Thank you!
Saurav over 6 years

self.navigationItem.titleView = searchBar if you you want it in centre this works
hidden-username over 5 years

I took a break from iOS for a few years and missed lots of UIKit updates. This is so helpful. Apple really needs better organization of their docs. I have spent countless hours going through the WWDC vids/samples, searching the Documentation Archive, and I have never seen this. Thanks for sharing
Diego Jiménez almost 5 years

It still working on iOS 12. Clean solution for Objective-C devs :)
Ric Santos about 4 years

Maybe I'm missing it, but it seems that the latest version only contains two examples, Default and Custom, neither of which has it in the nav bar :(