ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Develop a UISearchBar iPhone App

Updated on December 29, 2012
klanguedoc profile image

Kevin is a Software Developer with 20 years experience designing and building business intelligence and system integration solutions.


(C) 2012 kevin languedoc (klanguedoc)

The UISearchBar is iOS component in the UIKit that was introduced in version 2.0 of the Cocoa Touch Framework and iOS SDK. The UIControl and protocol have several important features to help a developer to quickly implement a search field in their applications. You can enable a search button, a cancel button and bookmark button. The delegate has methods to interact with which buttons are pressed.

This tutorial will demonstrate how to quickly develop a iPhone app that searches a SQLite database using the UISearchBar text field. The database contains a list of names in separate columns. The app will implement a SQL query to search either field, then display the results in an UITableView.

The whole application is built using a Single View application template. The SQLite database is built using the SQLite Manager in Firefox and sample data is added to the database through the SQLite Manager in Firefox.

Create Database and Sample Data

Create Database
For this example, I will create a SQLite database using SQLite Manager for Firefox, which is a free addon. As the following figure depicts, I create a database titled “dbsearch.sqlite” and one table, “names” to hold a sample of first and last names. Save the file to a convenient location since it will have to be added to the iOS project later. Then I add three columns:

  • id: primary key, int, auto incrementing
  • firstname:varchar
  • lastname:varchar

Using the SQLite Manager, I add some sampling data so that I may perform a search later.

Figure 1 : Creating the SQLite Table
Figure 1 : Creating the SQLite Table | Source
Figure 2 : Add data
Figure 2 : Add data | Source

Create Project

The next step as usual is the create the project. Choose the Single View application template to create a simple iOS iPhone app. Call the app DbSearch like the database and exclude the option to use a Xib which will automatically create a storyboard instead.

Once the project is created, select the project root in the navigator and the Summary page on the right in the IDE. Since I will be working with a SQLite database, I will need to add the appropriate library. Scroll down to the Linked Libraries and Frameworks section. Click on the “+” button to bring up the library selector popover. In the search field, type sqlite and then select the “libsqlite3.0.dylib” library and click “add” to close the popover and add the library to the project. You will have to manually drag the library to the framework group as the IDE just adds it to the Resource group by default.

Next right click on the DbSearch group and select “Add files to …” context menu item and browse to the location where the dbsearch.sqlite file was saved, select the database file and click “Add” to begin copying the database to the project. A second popover will appear where you will need to select the first option “copy items to destination group’s folder (if needed)” to actually the project, which is important otherwise only a reference will be added. Now that the project is setup we can build the storyboard and controller logic.

Develop Storyboard

The storyboard is going to be very simple with only an UISearchBar control, a UITableView and corresponding UITableCell. Switch to the “Windows & Bars” section of the Object Library and drag a UISearchBar onto the Canvas and add it to the top of the Scene. With control selected, open the Attributes inspector and select the following options:

  • Shows Search Results button
  • Shows Cancel button

We won’t need to the other options for this example app. Next add a UITableView UIControl and a UITableCell. superimpose the cell control on the table. With the UITableCell selected add an identifier through the Attributes inspector page. Then drag a connection from the UITableView to the UIViewController proxy (yellow globe or circle on the bar below the the main scene). When you release the mouse button, a popover will appear to allow you to set the delegate and the data source. Set both of them.

Then we will create the IBOutlets, open the Editor assistant by clicking on the tuxedo looking icon in the toolbar. To create the IBOutlets drag a connection (ctrl+drag) using the mouse button to the open header file in the Editor assistant. Releasing the mouse button activates a popover, thus allowing you to create a IBOutlet connection by entering a name for the connection in the appropriate field and clicking on “connect”. Perform this operation for the the UISearchBar and the UITableView.

The UI Layout for the App
The UI Layout for the App | Source

Controller Code

With the interface built and the initial IBOutlets created, we will need to add a variable for a NSMutableArray which will be used to store that data for the UITableView, hence its data source. If you want to manipulate the data in the UITableView, you would interface with its data source. In other words with the NSMutableArray.

The other addition is a method to interface with the database: searchDatabase. This method will need take one argument for the search term. The code for the method will be explained in full in the implementation part. To create the interaction for the UITableView, UITableCel and UISearchBar, we will need to add the appropriate protocols. So for the UISearchBar you will need to include the UISearchBarDelegate which will allow you to implement the searchBarCancelButtonClicked and searchBarSearchButtonClicked methods to respond to the buttons in the UISearchBar. For the UITableView, the UITableViewDelegate and UITableViewDataSource protocols.The code for the header is provided below.

Switching to the implementation file, you will need to define the getter and setter properties using the @synthsize directive. Just below the @implementation ViewController code, add the @synthesize directive followed by the NSMutableArray variable, nameList, and the displaySearch UITableView.

For this example, we will implement two UISearchBarDelegate methods for when the Search button is clicked on the keyboard and also when the Cancel button is clicked on the UISearchBar.

The searchBarCancelButtonClicked method will reset not only the UISearchBar field but also its data source and UITableView and dismiss the keyboard. The complete code is provided below.

The searchBarSearchButtonClicked method is similar in design to searchBarCancelButtonClicked except that will calls the searchDatabase method.

This method is the main workhorse of the application. The searchDatabase method provides the interface with the SQLite database by passing the searchTerm argument from the searchBar field. The method locates the database in the Resource folder and if the file exists proceeds to open the database. In the next step, the query is created to search for the searchTerm in either the firstname column or the lastname column. The results are written to the nameList NSMutableArray. The source code is provided below.

To display the returned results we will need to set up the UITableView delegate and data source. The numberOfSectionsInTableView tells the table how many sections the table will have. Sections are groups of rows. I will set this to 1.

The numberOfRowsInSection tells the table how many rows to display. Here it is custom to indicate the number of elements in the array or data source.

This method configures the UITableCell by gettting a handle on the cell prototype in the UITableView and assign the value at indexPath of the array to the label property of the cell. This method will be called repeatedly for each row that was defined in the numberOfRowsInSection or the number of objects in the array.


//  ViewController.h
//  DbSearch
//  Created by Kevin Languedoc on 12/14/12.
//  Copyright (c) 2012 Kevin Languedoc. All rights reserved.

#import <UIKit/UIKit.h>
#import <sqlite3.h>

@interface ViewController : UIViewController<UISearchBarDelegate, UITableViewDataSource, UITableViewDelegate>{
    sqlite3 *db;
@property(nonatomic,strong)NSMutableArray *nameList;
@property (strong, nonatomic) IBOutlet UISearchBar *searchBar;

@property (strong, nonatomic) IBOutlet UITableView *displaySearch;



//  ViewController.m
//  DbSearch
//  Created by Kevin Languedoc on 12/14/12.
//  Copyright (c) 2012 Kevin Languedoc. All rights reserved.

#import "ViewController.h"

@interface ViewController ()


@implementation ViewController
@synthesize displaySearch, nameList;

- (void)viewDidLoad
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    [self searchBar].delegate=self;

- (void)didReceiveMemoryWarning
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.

-(void)searchBarCancelButtonClicked:(UISearchBar *)searchBar{
    [self searchBar].text=@"";
    [displaySearch reloadData];
    [displaySearch resignFirstResponder];
    [self.view endEditing:YES];

-(void)searchBarSearchButtonClicked:(UISearchBar *)searchBar{
    [self searchDatabase:searchBar.text];
    [self searchBar].text=@"";
    [displaySearch reloadData];
    [displaySearch resignFirstResponder];
    [self.view endEditing:YES];
    BOOL fileExist;
    NSString *root = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"dbsearch.sqlite"];
    NSFileManager *fileMgr = [NSFileManager defaultManager];
    nameList=[[NSMutableArray alloc] init];
    fileExist = [fileMgr fileExistsAtPath:root];
        if(!(sqlite3_open([root UTF8String], &db) == SQLITE_OK))
            NSLog(@"An error has occured.");
            NSString * sqlQry = [[NSString stringWithFormat:  @"SELECT firstname, lastname FROM  names where firstname=\"%@\" ", searchTerm] stringByAppendingString:[NSString stringWithFormat:@" or lastname=\"%@\"",searchTerm]];            
            sqlite3_stmt *sqlStatement;
            if(sqlite3_prepare_v2(db, [sqlQry UTF8String], -1, &sqlStatement, NULL) != SQLITE_OK)
                NSLog(@"Problem with prepare statement: %d", sqlite3_errcode(db));
            while (sqlite3_step(sqlStatement)==SQLITE_ROW) {
                NSString * concatName = [[ NSString stringWithUTF8String:(char *) sqlite3_column_text(sqlStatement,0)] stringByAppendingString:[NSString stringWithFormat:@" %@",[ NSString stringWithUTF8String:(char *) sqlite3_column_text(sqlStatement,1)] ]];
                NSLog(@"This is the filename %@",concatName);
                [nameList addObject:concatName];


#pragma mark-
#pragma mark table data source and delegate methods
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    // Return the number of rows in the section.
    return [nameList count];

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    static NSString *CellIdentifier = @"displaySearchCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    NSString * nameObj = [nameList objectAtIndex:indexPath.row];

    cell.textLabel.text = nameObj;
    return cell;


As the screenshot depicts, when a user enters a name in the search field and performs the search by clicking on the Search button on the keyboard the results are fetched from the database, if any, and displayed in the database. The UITableView is reset before each search.

Figure 3 : Running App
Figure 3 : Running App | Source


    0 of 8192 characters used
    Post Comment
    • profile image


      17 months ago

      Hey Kevin, thanks for codes but its never working. Could you renew the project?

    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      2 years ago from Canada


      Sorry for the late delay in getting back to you. I was away on a project and I kinda left my blog go stale. Again my appologies. This tutorial was developed uisng iOS 5 SDK. What version are you using now as this will have an impact on the code and functionality

    • profile image


      2 years ago

      your code is also not working which you share on

      its not showing any thing on TableView and in database there are 8 entries

      please help

    • profile image


      2 years ago

      Its not working if i am doing it in this project(

      its not showing search result

    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      2 years ago from Canada


      Send me an email and I'll send you the code

    • profile image


      2 years ago

      maybe you can share your project

      cause I can't get any results

    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      2 years ago from Canada

      Hi Sasha

      Sorry for the absence. What can I help u with


    • profile image


      2 years ago

      no results all the time

    • profile image


      4 years ago

      Yes, I think accessing their data over the nterowk.I am developing a mobile app to go with my web app. I don't want to loose all of the code I've done in PHP, so I'm thinking that I can use Titanium and your tutorials on remote data, XML/RSS and the httpClient function to access a lot of that code and run those php scripts.I'm thinking that I can use a local db to have user input their subdomain and login info. But how do I send this information to the web and receive things like cookies and sessions? Can I set an account id as a global variable?

    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      5 years ago from Canada

      I will add to the

    • durul profile image


      5 years ago from maryland, US

      Could you share sample code. Because I update your other project DBTUITableView. but It doesn't work.


    • klanguedoc profile imageAUTHOR

      Kevin Languedoc 

      6 years ago from Canada

      Hi Vetranks,

      Nice to hear from you. I would like to wish Merry Christmas and Happy New Year. I suppose you have already started the new year in Japan. I hope you are having a good party.

      To answer your question, you can add a new view controller like in this tut. or you can add the ISearchBar to the existing UITableViewController. You need to add the necessary protocols to the proper header. There are many ways to add search depending on your needs.


    • Vetranks profile image


      6 years ago from Shinjuku-ku, Tokyo, Japan

    • Vetranks profile image


      6 years ago from Shinjuku-ku, Tokyo, Japan

      Hello Kevin, how are you? I wanted to ask best wishes for Christmas and the New Year, and I wanted to ask how you could put this in this tutorial

      thank you very much


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)