150

Share

APP DEVELOPMENT

How To Add A Search Bar In Table View Swift?

  • Home
  • Blogs
  • How To Add A Search Bar In Table View Swift?

A table view is a UITableView class that is a subclass of UIScorollView. A search bar in the table view will make the search results much easier for the user.

Somish Kakadiya

June 29, 2022

Search bar use for search data from many data. Example :- We have table view with contain many country name. Without search bar select any country from many country name is difficult. If we search name with use of search bar is easy.

Here, I show how to search data in search bar and how to use search bar in table view.

Follow these steps describe below:

Step - 1: Open Xcode First We Required Table View And Search Bar

So open main storyboard. Search tableview and searchbar in tool and insert.

 

 

Select table view and drag and drop in ViewController.

 

 

Again open tool box and search searchbar.

 

 

Select search bar, drag and drop in ViewController.

 

 

Step - 2: Open Main Story Board

Open Xcode and create a new single view app.

For product name, use search bar in table view and then fill out the organization name and organization identifier with your customary values. Enter Swift as Language and choose Next.

 

 

Step - 3: Create Outlet And Set Delegate Method Self

After insert in StoryBoard create outlet of tableview and searchbar.

 

 

After create outlet set both delegate method in ViewDidLoad.

Step - 4: Add Delegate Method

After create outlet add delegate method of both and add delegate method function in class file.

Step - 5: Declare Array

Here we declare two array. One is for contain all country name and second one is store data after search any country.

Step - 6: Register Table Cell

After the declaration of array, we need register table cell.

Step - 7: Assign Value To Array

Assign value second array SearchData in ViewDidLoad.

Step - 8: Set Number Of Cell In Table View

After register, the cell set how many numbers of cells needs in the table view.

Here we need the same number of cells to total country name count.

So set the number of cells in the Number of Rows In Section method.

Step - 9: Set Cell In Table View

Here we need country name as cell title. So assign in CellForRowAt method.

Step - 10: Set SearchBar Delegate Method

Here we want the search result at a time when entering the value in the search bar.

We can write code in TextDidChange function method of the search bar.

Write given code in search bar delegate method.

Step - 11: Set SearchBar Cancel Button

We need the search bar empty when the user presses the cancels button of the search bar.

So write the given code in SerachBarCancelButtonClicked method.

Step - 12: Run Project

All coding complete so run project in device or simulator.

Select any device or simulator and press play button.

 

 

Step - 13: OutPut

Here I attach screenshot of output before search and after search.

Output before search:

 

 

Output after search:

 

 

 

 

Conclusion:

Follow this step-by-step guide for implementing a searching functionality in Table View to search data from many rows and columns of the table view.

Try developing this with the Swift programming language, which is not only friendly but expressive and enjoyable as a scripting language.

img

Somish Kakadiya

CTO of Vasundhara Infotech, a leading Software development company in the USA. His technological interests has helped the company in making useful decisions.

message

Have a project in mind? Drop a message to Bansi Pipaliya & start the discussion!

Get a Newsletter

Sign Up to our newsletter to get latest updates staight in your inbox.

Vasundhara respects your privancy. No Spam!

Get a Newsletter

Sign Up to our newsletter to get latest updates staight in your inbox.

Vasundhara respects your privancy. No Spam!

message

Have a project in mind? Drop a message to Bansi Pipaliya & start the discussion!

Latest 13 Web Development Trends To Expect In 2022
April 11, 2022 Category : company news

Revealing Vasundhara’s New Identity

Read More
Leave a Comment