Add filter button to UISearchController

Question

I want to add a "filter" or "sort" button next to the searchBar inside a UISearchController. I have already tried to add the UIButton and the searchbar into a UIView and set this as my UITableView tableView.tableHeaderView This does not work because the tableView.tableHeaderView get's set back to the UISearchBar only when dismissing the controller. Here is an example of how I want it to look:

Dowlen

is there a particular reason you're using a search controller? are you open to not using it and filtering the table view directly? – Stotts

The reason is purely optically. So I'd be fine with anything – Dowlen

i should be more specific, you already have a table view, are you happy to just filter it or are you using a specifically different view to present the search results / want the search controller overlay capability? – Stotts

I already have a tableView and I'm happy just filtering that – Dowlen

This questions is too broad and lacks an MCVE. – Klaxon

@NiklasHein i got a solution before posting it i need some clarification, are you using cancel button in UISearchBarController..? – Dewayne

I am right now, but also am open to other approaches like swipe gestures to resign the responder – Dowlen

Answer 1

I could create a search filter with a few lines of code. I hope it helps.

*I chose the bookmark button to apply filter icon; because I have already used cancel button for custom action.

First, you have to delegate searchBar to handle bookmark button click action. Then you should set properties as below. If you want to give custom position (default position is right side), you need to setPositionAdjustment.

searchController.searchBar.delegate = self
searchController.searchBar.showsBookmarkButton = true
searchController.searchBar.setImage(UIImage(named: "Sort"), for: .bookmark, state: .normal)
// MARK: You may change position of bookmark button.
//searchController.searchBar.setPositionAdjustment(UIOffset(horizontal: 0, vertical: 0), for: .bookmark)

Then, override searchBarBookmarkButtonClicked function inside your VC. You can handle click event inside this method.

func searchBarBookmarkButtonClicked(_ searchBar: UISearchBar) { //showAlert, presentVC or whatever you want here }

Also if you want to hide bookmark button while search controller is active, you need to apply control inside updateSearchResults method.

if searchController.isActive {
    searchController.searchBar.showsBookmarkButton = false
} else {
    searchController.searchBar.showsBookmarkButton = true
}

When searchController is not active:

When searchController is active:

Fantan

Great solution! Thanks. – Selfwinding

How do you tint the image? Mine is just grey. – Hexa

@TiloDelau I think your navigation tint color is default (gray). You may change statusBar tint color as you wish. – Towelling

@Ali I am using UIBarButtonItem.appearance().tintColor. Also tried searchController.searchBar.barTintColor = UIColor.white. Neither works. I can have the cancel (and back button) a specific color, this does not do it. I tweak a lot in the status bar and search bar but I cannot target this. And would prefer to target it specifically to show that some filters have been selected and are active. also tried //UINavigationBar.appearance().tintColor – Hexa

Answer 2

Instead of customising the UISearchBar and complicating things, you can keep it simple by adding your own button beside SearchBar.

Set No the Shows cancel button option for SearchBar using

self.searchBar.showsCancelButton = true

OR

uncheck Shows cancel button option for SearchBar in StoryBoard

Add your own button beside SearchBar as shown below

And then accordingly add IBaction to the button and perform your actions in it.

Also in ideal case, it is not recommendable to put this view in Header of tableview. It will be better if it is above the tableview as also followed by Apple.

Grantee

This has problems when used together with UISearchController. When active, the searchbar view gets removed from its superview and placed above everything else to be sticky. So the custom button is gone while search is active... – Necklace

I tried this approach without an UISearchController, but then sometimes the cancel button is not working anymore. Instead of calling the searchBarCancelButtonClicked, the searchBar gets focused again :/ – Necklace

Answer 3

I tried lot of way's to customize searchbar but nothing helped me at last found a way to full-fill your requirement

let mysearchController = UISearchController(searchResultsController: nil)
    mysearchController.searchBar.showsCancelButton = true
    mysearchController.searchBar.barStyle = UIBarStyle.Black
    for var subView1 in mysearchController.searchBar.subviews{
        for var subView2 in subView1.subviews{
            if subView2 .isKindOfClass(UIButton){
                let customizedCancelButton:UIButton = subView2 as! UIButton
                customizedCancelButton.enabled = true
                customizedCancelButton.setTitle("", forState: UIControlState.Normal)
                 let image1 = UIImage(named: "Sort")
                customizedCancelButton.setBackgroundImage(image1, forState: UIControlState.Normal)
                customizedCancelButton.addTarget(self, action: "sort", forControlEvents: UIControlEvents.TouchUpInside)
            }
        }
    }

above code is much simple to understand.

    func sort(){
       print("sort button fired!!!")
    }

Dewayne

Answer 4

Updated for iOS 13, supports early versions of iOS, based on Gokul G answer.

Add extension file to project — UISearchControllerCancelButton.swift (View on gist.github.com):

extension UISearchController {
    func cancelButton() -> UIButton? {
        if #available(iOS 13.0, *) {
            return findCancelButton13()
        }
        return findCancelButtonOld()
    }

    func findCancelButtonOld() -> UIButton? {
        for subView in searchBar.subviews {
            for v in subView.subviews {
                if let button = v as? UIButton {
                    return button
                }
            }
        }
        return nil
    }

    @available(iOS 13.0, *)
    func findCancelButton13() -> UIButton? {
        for subView in searchBar.subviews {
            for v in subView.subviews {
                for b in v.subviews {
                    if let button = b as? UIButton {
                        return button
                    }
                }
            }
        }
        return nil
    }
}

Use:

let controller = UISearchController(searchResultsController: nil)
controller.searchBar.showsCancelButton = true

if let button = controller.cancelButton() {
    // Customize button
    let iconImage = UIImage(named: "yourIconName")
    button.isEnabled = true
    button.setTitle("", for: .normal)
    button.setBackgroundImage(iconImage, for: .normal)
    button.addTarget(self, action: #selector(yourMethodName), for: .touchUpInside)
}

Method declaration for button touch event:

@objc func yourMethodName() {
    print("Cancel button tap")
}

Sanitation

I tried to use this method but my done button does show – Jackofalltrades

Answer 5

I'd lose the search controller, it doesn't offer any features you want really and the additional view / VC that you need to supply adds complexity / code duplication.

Your existing table view already have everything you need, because it has a data source. That's either an array or an FRC. If it's an array then you can replace the contents of the array with your filtered contents, and if it's an FRC you can change the predicate.

Note: in the array case, have 2 array references, 1 that points to an array holding all your unfiltered items and another that is initially a reference to the same array - the second reference is used to populate the table view. Then, when you filter, you create a new array with only the filtered items and point the second reference at that.

Instead of implementing the search controller delegate method you implement the search bar delegate methods and use that to trigger filtering and reset.

Now you've gotten rid of the search controller you also aren't switching table views, so you only have 1 TV and 1 header view. Now there is no reason to change the header view and everything just works.

Stotts

I don't thing you understood what I am looking for. I don't want to know how to filter a tableView but rather how to manage to get a filter Button right next to the search Bar (in a Search Controller ideally) – Dowlen

That's why I asked about losing the search controller. The problem you have is that the search controller presents a different view, so the header is configured differently. You should be able to just setup another header on the other view. I find that search controllers just add complexity for little real benefit. If you just have 1 view you have 1 header that is simple to configure and the focus management is simple too. – Stotts