Get search bar in navigation bar in Swift

Question

So I've tried everything trying to get a search bar into the navigation bar in Swift. But sadly I haven't gotten it working, just yet...

For those of you who don't know what I'm talking about, I'm trying to do something like this

Note the search bar in the navigation bar. So here's what I'm currently using

self.searchDisplayController?.displaysSearchBarInNavigationBar = true

I popped that in my viewDidLoad, and then when I load up the app I'm presented with, just an empty navigation bar.... :( Any ideas?

Answer 1

Try this

let leftNavBarButton = UIBarButtonItem(customView:Yoursearchbar)
  self.navigationItem.leftBarButtonItem = leftNavBarButton

Update

You keep a lazy UISearchBar property

lazy   var searchBar:UISearchBar = UISearchBar(frame: CGRectMake(0, 0, 200, 20))

In viewDidLoad

searchBar.placeholder = "Your placeholder"
var leftNavBarButton = UIBarButtonItem(customView:searchBar)
self.navigationItem.leftBarButtonItem = leftNavBarButton

If you want to use storyboard just drag your searchbar as a outlet,then replace the lazy property with your outlet searchbar

Answer 2

    // create the search bar programatically since you won't be
    // able to drag one onto the navigation bar
    searchBar = UISearchBar()
    searchBar.sizeToFit()

    // the UIViewController comes with a navigationItem property
    // this will automatically be initialized for you if when the
    // view controller is added to a navigation controller's stack
    // you just need to set the titleView to be the search bar
    navigationItem.titleView = searchBar

Answer 3

In your view controller:

lazy var searchBar = UISearchBar(frame: CGRectZero)

override func viewDidLoad() {
    super.viewDidLoad()

    searchBar.placeholder = "Search"

    navigationItem.titleView = searchBar
}

Doing it this way, by setting the navigationItem.titleView, the search bar is automatically centered across the iPhone and iPad devices. Note: only tested with v8.4 and v9.0

for SWIFT 3

lazy var searchBar = UISearchBar(frame: CGRect.zero)

Answer 4

    let searchBar = UISearchBar()
    searchBar.sizeToFit()
    searchBar.placeholder = ""
    self.navigationController?.navigationBar.topItem?.titleView = searchBar

Answer 5

func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {

    searchBar.endEditing(true)
    searchBar.text = nil
    print("## search btn clicked : \(searchBar.text ?? "")")
} 

Answer 6

For Swift 4 and 5.

Embed your View Controller in a Navigation Controller

let searchBar = UISearchBar()
self.navigationItem.titleView = seachBar
[Here is a screenshot.][1]
let cancelButton = UIBarButtonItem(barButtonSystemItem: .cancel, target: self, action: 
cancelButton.tintColor = #colorLiteral(red: 0.9994240403, green: 0.9855536819, blue: 0, alpha: 

searchBar.tintColor = #colorLiteral(red: 0.9994240403, green: 0.9855536819, blue: 0, alpha: 
self.navigationItem.rightBarButtonItem = cancelButton

Answer 7

Setting SearchBar as titleView, changes height of navigationBar to 56. To fix this, you can embed searchBar in view and set that as titleView.

    var offset: CGFloat = 20

    // If VC is pushed, back button should be visible
    if navigationController?.navigationBar.backItem != nil {
        offset = 40
    }

    let customFrame = CGRect(x: 0, y: 0, width: view.frame.size.width - offset, height: 44.0)
    let searchBarContainer = UIView(frame: customFrame)
    searchBar = UISearchBar(frame: customFrame)
    searchBarContainer.addSubview(searchBar)
    navigationItem.titleView = searchBarContainer

Answer 8

For iOS 11 and above

navigationItem.searchController = searchController

For iOS 10 and below

navigationItem.titleView = searchController.searchBar;

or you can assign it as leftBarButtonItem as described in this answer