CODEWITHSUNDEEP
iosswiftuisearchbar
John Doe
John Doe

Reputation: 521

How to exit from the search on clicking on Cancel button?

I have a search bar with cancel button. But when I click on Cancel button it doesn't close the search bar. How can I make that on click on Cancel it will return search bar to the first state?

If you have any questions - ask me, please

Upvotes: 30

Views: 66708

Answers (10)

eemmrrkk
eemmrrkk

Reputation: 1700

For Objective-C solution

- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar {

    if(@available(iOS 11.0, *)){
        [self.navigationController.navigationItem.searchController.searchBar resignFirstResponder];
    }
    // reload your table or whatever you want.
    // searchController is available after the iOS 11, so it will be good to use @available check
}

Upvotes: 0

George
George

Reputation: 30401

Very quick and simple. Just conform to the UISearchBarDelegate protocol, and then implement this function in your class:

func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
    searchBar.resignFirstResponder()
}

resign means that it will quit

FirstResponder is the focus of the view

In conclusion, this takes focus away from the search bar, effectively canceling it.

Upvotes: 4

Hackbarth
Hackbarth

Reputation: 19

When you tap the cancel button, the searchBar sees it like you've got a new thing to search, that's why if you put resignFirstResponder() on the cancelButton clicked it won't work, because after this it will call didBeginText.

So I put a condition in didBeginText, so when the string in the search has less or 0 characters it will resign the first responder. Just like this: 

func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
    if searchText.characters.count < 1 {
        searchBar.resignFirstResponder()
    }
}

It's an easy approach and works as well. Best regards!

Upvotes: 0

Nijat Rzayev
Nijat Rzayev

Reputation: 31

Try this:

searchController.active = false

Upvotes: 2

Manu
Manu

Reputation: 647

Swift 3

func searchBarShouldBeginEditing(_ searchBar: UISearchBar) -> Bool {
    searchBar.showsCancelButton = true
    return true
}

func searchBarTextDidEndEditing(_ searchBar: UISearchBar) {
    self.searchBar.endEditing(true)
    searchBar.resignFirstResponder()
}

func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
    searchBar.resignFirstResponder()
}

func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
    self.searchBar.endEditing(true)
    searchBar.showsCancelButton = false
    searchBar.resignFirstResponder()
}

The Cancel button appears only when the user start entering characters in the field.

Upvotes: 2

Ulug&#39;bek
Ulug&#39;bek

Reputation: 2832

I am also come across with this problem, in my case after searching any item from table view than click one of the result item it's opened details view but search bar does not disappeared. I use Nicat's answer with a little changes, here is my version:

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

    searchController.isActive = false
    self.searchBarCancelButtonClicked(searchController.searchBar)

    ...
}

Upvotes: 4

Rubaiyat Jahan Mumu
Rubaiyat Jahan Mumu

Reputation: 4127

Try. It works fine.

class MyViewController: UIViewController, UISearchBarDelegate {

    func searchBarTextDidBeginEditing(_searchBar: UISearchBar) {
        searchBar.setShowsCancelButton(true, animated: true)
        //write other necessary statements
    }

    func searchBarCancelButtonClicked(_searchBar: UISearchBar) {
        searchBar.text = nil
        searchBar.setShowsCancelButton(false, animated: true)

        // Remove focus from the search bar.
        searchBar.endEditing(true) 
    }
}

Upvotes: 7

orangemako
orangemako

Reputation: 954

class MyController: UIViewController, UISearchBarDelegate {
    // Called when search bar obtains focus.  I.e., user taps 
    // on the search bar to enter text.
    func searchBarTextDidBeginEditing(searchBar: UISearchBar) {
        searchBar.showsCancelButton = true
    }

    func searchBarCancelButtonClicked(searchBar: UISearchBar) {
        searchBar.text = nil
        searchBar.showsCancelButton = false

        // Remove focus from the search bar.
        searchBar.endEditing(true)

        // Perform any necessary work.  E.g., repopulating a table view
        // if the search bar performs filtering. 
    }
}

Upvotes: 18

Peter Todd
Peter Todd

Reputation: 8651

You need to implement the UISearchBarDelegate :

class ViewController: UIViewController, UISearchBarDelegate {
    @IBOutlet weak var searchBar: UISearchBar!

Set the search bar delegate to self

 override func viewDidLoad() {
        super.viewDidLoad()

        searchBar.showsCancelButton = true
        searchBar.delegate = self

and then implement the butCancelSearchAction delegate function to do whatever you need to do to cancel the search action and reset the search text:

func searchBar(searchBar: UISearchBar, textDidChange searchText: String) {
    // Do some search stuff
}

func searchBarCancelButtonClicked(searchBar: UISearchBar) {
    // Stop doing the search stuff
    // and clear the text in the search bar
    searchBar.text = ""
    // Hide the cancel button
    searchBar.showsCancelButton = false
    // You could also change the position, frame etc of the searchBar 
}

Upvotes: 63

Mayank Patel
Mayank Patel

Reputation: 3908

You need to implement the UISearchBarDelegate.

The UISearchBarDelegate protocol defines the optional methods you implement to make a UISearchBar control functional. A UISearchBar object provides the user interface for a search field on a bar, but it’s the application’s responsibility to implement the actions when buttons are tapped. At a minimum, the delegate needs to perform the actual search when text is entered in the textField. Read this

In Objective C

- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar {

     [self.searchDisplayController setActive:NO animated:YES];

}

In Swift :

func searchBarCancelButtonClicked(searchBar: UISearchBar) {

    self.searchDisplayController.setActive(false, animated: true)
}

Upvotes: 4

Related Questions