How to Implement UISearchBar in iPhone App For Data Searching

Recently, we’ve been getting a lot of requests from our blog subscribers to share the implementation process of UISearchBar to provide data searching feature in iPhone app.

While it’s not that difficult task to add search bar in an iPhone app, but today we’ll walk through its concept and implementation process in our iOS app tutorial.

UISearchBar Example

Today, we’ll create a sample app to demonstrate how to add search bar in any iOS app by using UITableView. We’ll add the list of country names, so that users can easily country name-list on searching an alphabet or phrase through UI SearchBar.

Let’s Get Started

Open your XCode and create a new project under file menu.

samplesearchbar1

Select Single View Application and click on Next.

samplesearchbar2

In the next tab, write down project name and description.

samplesearchbar3

Once you create a new project, go to Main.storyboard and select ViewController.

samplesearchbar4

Now drag and drop UISearchBar from “Show the object library” section.

samplesearchbar5

samplesearchbar6

Now select UISearchBar and see the attribute inspector which have properties of UISearchBar. We can manage the text, placeholder, bar style, background, keyboard functions like appearance, return key, spell checking etc.

samplesearchbar12

Now, we set outlet UI SearchBar in ViewController as well as UITableView for show the list and get the search result after filtration.

@IBOutlet weak var searchBar: UISearchBar!
@IBOutlet weak var tblSearch: UITableView!

samplesearchbar9

samplesearchbar10

Now set delegate for UISearchBar and UITableView.

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, UISearchBarDelegate

override func viewDidLoad() {
super.viewDidLoad()
self.tblSearch.dataSource = self
self.tblSearch.delegate = self
self.searchBar.delegate = self
// Do any additional setup after loading the view, typically from a nib.
}

Now, we load all the country list in table by UITableView datasource and delegate.

//MARK: UITableViewDataSource

func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 1
}

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
if(isSearch) {
return arrFilter.count
}
return arrCountry.count;
}

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath)
configureCell(cell, forRowAtIndexPath: indexPath)
return cell
}

func configureCell(cell: UITableViewCell, forRowAtIndexPath: NSIndexPath) {
if(isSearch){
cell.textLabel?.text = arrFilter[forRowAtIndexPath.row]
} else {
cell.textLabel?.text = arrCountry[forRowAtIndexPath.row];
}
}

Now, we add UI SearchBar delegate.

//MARK: UISearchbar delegate
func searchBarTextDidBeginEditing(searchBar: UISearchBar) {
isSearch = true;
}

func searchBarTextDidEndEditing(searchBar: UISearchBar) {
searchBar.resignFirstResponder()
isSearch = false;
}

func searchBarCancelButtonClicked(searchBar: UISearchBar) {
searchBar.resignFirstResponder()
isSearch = false;
}

func searchBarSearchButtonClicked(searchBar: UISearchBar) {
searchBar.resignFirstResponder()
isSearch = false;
}

func searchBar(searchBar: UISearchBar, textDidChange searchText: String) {

if searchText.characters.count == 0 {
isSearch = false;
self.tblSearch.reloadData()
} else {
arrFilter = arrCountry.filter({ (text) -> Bool in
let tmp: NSString = text
let range = tmp.rangeOfString(searchText, options: NSStringCompareOptions.CaseInsensitiveSearch)
return range.location != NSNotFound
})
if(arrFilter.count == 0){
isSearch = false;
} else {
isSearch = true;
}
self.tblSearch.reloadData()
}
}

And done!

simulator-screen-shot-jan-21-2017-1-23-47-pm

Now when a user will start a search, the UI SearchBar will superimpose the search bar interface and display the search results.

But, if you’re not a technical person, then the implementation process could become daunting task. And, if your desire is to add this feature in your iPhone app or build an iPhone app from ground, hire best iPhone app development company, discuss your app idea, and get started working on your app as soon as possible.

Grab a free copy of search bar example demo from Github.

This page was last edited on January 21st, 2017, at 17:57.
 
 

Have an iOS App Idea in Mind? Let's Discuss!

Get your free consultation now