In this section, with an example, we will get acquainted with the ui search bar of iOS apps in Swift. Also with this example in swift apps we learn how to use the iOS search bar on a ui tabular display to be able to search for items in a collection.

UI search bar in iOS apps

In iOS, the search bar is used to search for items in the collection. Basically, the iOS search bar provides you with a text box that also has search and cancel buttons, allowing the user to type based on the text they enter in the text box; Search for the data you need among a set of items.

Generally; If we use the iOS search bar in swift apps; It will have a similar view below.

We can use the search bar in our iOS apps by adding a UISearchBar class reference. Now let’s look at an example of how we can use the iOS app ui search bar in swift apps to find items in a table view like; Let’s search.

Create the iOS search bar app in Swift

To create a new project in Xcode on iOS, open Xcode from the application folder list. After opening Xcode, the welcome window will open as shown below. In the Welcome window, click on the second option, “Create a new Xcode Project”; Click (create a new Xcode Project) or select the File New Project path.

After selecting “Create a new Xcode project”, a new window will open in which we must select our template.

The new Xcode window includes several built-in application templates to implement the usual type of iOS apps, such as page-based apps, tab-based apps, games, spreadsheet apps, and more. These templates have a preset interface and source code files. .

For example, in the iOS search bar, we have the most basic pattern of the app, which is “demo only”; We will use. To select this item, go to the iOS section on the left, select the application from the select section, and in the main part of the window that opens, select “single view application” and click on the next button, as shown below. .

After clicking Next,

we will see a window like the one below, in this case we have to mention the project name and other details for our program.

Product name: “Search in Table View”

The name we enter in the Product Name section is used for the project and application.

Organization name: “Tutlane”

You can enter the name of the organization or your name in this field; Of course you can leave that section blank.

Organization Identifier): “com.developersocociety)”

If you do not have an enterprise ID, enter com.example.

Bundle Identifier: This section is automatically generated based on the terms we entered in the product name and organization ID.

Language: “Swift”

Select the language type “Swift” because we want to develop applications using swift.

Universal (devices): “Universal”

Select the Devices option as Universal This means that this app is for all Apple devices; If you need to run the app for iPad only, you can select the iPad option to restrict your app to running only on iPad devices.

Use core Data: Not selected

This option is used for database operations. Select this option if you are doing any database-related operations in your application, otherwise do not select this option.

Include Unit Test: Not selected

If you need unit tests for your application, select this option otherwise leave it unselected.

Includes UI tests: not selected

Select this option if you need UI tests for your application, otherwise do not select it.

After completing the options, click the Next button as shown below.

When we click the Next button;

A new window will open in which you must use the location where you want the new project to be saved; Let’s choose. Once you have selected the new project storage location; As shown below; Click the Create button.

After clicking the Create button, Xcode opens and creates a new project. In our project, Main.storyboard and ViewController.swift are the main files used to design the user interface and maintain the source code.

Main.storyboard – which is the visual interface editor and this file is used to design the application interface.

ViewController.swift – which contains the source code of our application and we use this file to write any code related to our application.

Now select the Main.storyboard file in the project, until Xcode opens the visual interface editor as shown below.

Now open the ViewController.swift file in your project which looks like this:

Add iOS app UI controls to the display in Swift

We now add controls to our applications; For this purpose, we open the library of objects. The object library appears at the bottom right of Xcode. If you did not find the object library, as shown below; Click the button that is the third button in the library selection bar on the left. (On the other hand, you can select the View Utilities Show Object Library path).

As we have suggested; Our interface is the Main.storyboard file, so open the Main.storyboard file.

Now look for Table View in the Object Library in the Filter box, then drag and drop Table View into ViewController in Main.storyboard;

Likewise similar to the following; We need to add another View Controller to the Main.storyboard file.

Now like the following; Link ViewController to Date Source and Delegate.

When we have made all these settings;

We need to write the relevant coding so that we can search for items using the search bar.

import UIKit

class TableViewController: UITableViewController, UISearchResultsUpdating {

let tableData = [“Austria”, “Australia”, “Srilanka”, “Japan”]

var filteredTableData = [String] ()

var resultSearchController = UISearchController ()

override func viewDidLoad () {

super.viewDidLoad ()

self.resultSearchController = ({

let controller = UISearchController (searchResultsController: nil)

controller.searchResultsUpdater = self

controller.dimsBackgroundDuringPresentation = false

controller.searchBar.sizeToFit ()

self.tableView.tableHeaderView = controller.searchBar

return controller

}) ()

// Reload the table

self.tableView.reloadData ()

}

override func didReceiveMemoryWarning () {

super.didReceiveMemoryWarning ()

// Dispose of any resources that can be recreated.

}

override func numberOfSectionsInTableView (tableView: UITableView) -> Int {

return 1

}

override func tableView (tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

if (self.resultSearchController.active) {

return self.filteredTableData.count

}

else {

return self.tableData.count

}

}

overridefunc tableView (tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

let cell = tableView.dequeueReusableCellWithIdentifier (“Cell”, forIndexPath: indexPath) as! UITableViewCell

if (self.resultSearchController.active) {

cell.textLabel? .text = filteredTableData [indexPath.row]

return cell

}

else {

cell.textLabel? .text = tableData [indexPath.row]

return cell

}

}

func updateSearchResultsForSearchController (searchController: UISearchController)

{

filteredTableData.removeAll (keepCapacity: false)

let searchPredicate = NSPredicate (format: “SELF CONTAINS [c]% @”, searchController.searchBar.text!)

let array = (tableDataasNSArray) .filteredArrayUsingPredicate (searchPredicate)

filteredTableData = array as! [String]

self.tableView.reloadData ()

}

}

Now run the program and check its output.

To implement the program; Select the required emulator (in this section we have selected the iPhone Six S Plus) and click the Play button, which is located in the upper left corner of the Xcode toolbar as shown below.

IOS search bar app output in Swift language

Below you can see the result of the iOS search bar app in Swift. We will now see that at the top of the table view; We have a search bar where you enter the text you want to search and search; Provides the results with which the text is matched.

This way we can use the iOS search bar in tabular view to search through a set of items in the swift app based on our needs.