How to Create Searchbar in iOS App Using UISearch Display Controller To Enhance User Interface

0
Shares
How to Create Searchbar in iOS App Using UISearch Display Controller To Enhance User Interface
4.7 (93.33%) 3 votes

Imagine you’ve 300+ contacts in your iPhone, and you’re required to call many of them frequently, how do you get it done quickly?

Of course, you open the contacts and search for the person’s name you need to call, right?

But, now imagine what if you weren’t given the searchbar in the contacts of your iPhone, and your only option was to scroll down each time to find the person’s contact to make a phone call.

Just imagine how frustrating it would be?

Similarly, when any iPhone app having large datasets, app that requires scrolling through massive lists, it makes a frustrating task for your app users. And, in that case, it’s vital to create a searchbar in your iPhone app using UIsearch display controller.

UISearchDisplayController Example

In our today’s iOS app tutorial, we’ll create an app to demonstrate how to create searchbar in iOS app by adding country names in database and perform search query.

Let’s Get Started

Open Xcode and create a new project under file menu.

samplesearchdisplaycontroller1

Select project type as Single View Application.

samplesearchdisplaycontroller2

In the next tab, set the project name and other details.

samplesearchdisplaycontroller3

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

samplesearchdisplaycontroller4

Drag and drop UITableView from “Show the object library” section.

samplesearchdisplaycontroller5

samplesearchdisplaycontroller6

Now, add new cell and set identifier to “Cell’

samplesearchdisplaycontroller7

samplesearchdisplaycontroller8

set outlet UITableView in ViewController to show the list and get the search result after filtration.

@IBOutlet weak var tblSearch: UITableView!

samplesearchdisplaycontroller9

Now, set delegate for UITableView and add UISearchResultsUpdating in ViewController class.

class ViewController: UIViewController, UISearchResultsUpdating

Now define Array for country and initialize filter Array with UISearchController.

var arrCountry = ["Afghanistan", "Algeria", "Bahrain","Brazil", "Cuba", "Denmark","Denmark", "Georgia", "Hong Kong", "Iceland", "India", "Japan", "Kuwait", "Nepal"];
var arrFilter:[String] = []

var searchController = UISearchController()

Add UISearchController in TableView header in viewDidLoad()

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.

self.searchController = ({
let controller = UISearchController(searchResultsController: nil)
controller.searchResultsUpdater = self
controller.dimsBackgroundDuringPresentation = false
controller.searchBar.sizeToFit()

//Add searchbar controller in header
self.tblSearch.tableHeaderView = controller.searchBar

return controller
})()

// Reload the table
self.tblSearch.reloadData()
}

Load all the country list in table by UITableView datasource and delegate.

//MARK: UITableViewDelegate

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {

}

func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return 44
}

//MARK: UITableViewDataSource

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

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
if (self.searchController.active) {
return self.arrFilter.count
} else {
return self.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) {
// 3
if (self.searchController.active) {
cell.textLabel?.text = arrFilter[forRowAtIndexPath.row]
} else {
cell.textLabel?.text = arrCountry[forRowAtIndexPath.row]
}
}

Add updateSearchResultsForSearchController delegate
//UISearch result update delegate
func updateSearchResultsForSearchController(searchController: UISearchController) {
arrFilter.removeAll(keepCapacity: false)

let searchPredicate = NSPredicate(format: "SELF CONTAINS[c] %@", searchController.searchBar.text!)
let array = (arrCountry as NSArray).filteredArrayUsingPredicate(searchPredicate)
arrFilter = array as! [String]

self.tblSearch.reloadData()
}

And done!

Now that you know the implementation process, you can easily implement it in your iPhone app development project. However, this is just a small portion of developing an app, and if you’d like to build iPhone app from scratch, take help from experts or consult with an iPhone app development company before you begin.

And…Before you go get cracking on your mobile app idea…

We’ve got something to share with you.

Ever since we started, our prime goal was to help all people who came to us for turning their ideas into realities. And, since then, we’ve helped dozens of successful entrepreneurs build their product apps to start their own company. In fact, we’ve been awarded many times back and forth for our quality of work and accomplishments. Furthermore, we’ve also been mentioned in the list of top mobile app development companies in India. You can check the article here.

Grab a free copy of UI Search Display Controller Demo from Github.

 
0
Shares
 

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