NHAutoCompleteTextField

Introduction:

Hello Objective-C fellows,

Today i am going to share you something helpful, which is widely and frequently used in our projects. Recently I ran into an issue to develop a functionality in which, whenever user types in  a textfield, an auto complete suggestion list appears relevant to the text entered and user selects among them. I would like to offer a simple solution with great flexibility for the customisation of the code as per your need and will be easy to integrate. I would like to name it as NHAutoCompleteTextField.

Close Look:

Before going into details, first have a look at control for how it looks like:

iOS Simulator Screen shot 03-Jan-2015 4.38.10 AM

In this example you will see a country in brown colour followed by its capital and the search text works for both country name and its capital. (notice the highlighted text).

How to integrate:

All you have to take care of the two protocols NHAutoCompleteTextFieldDataSourceDelegate and NHAutoCompleteTextFieldDataFilterDelegate, first one for preparing and dealing with the datasource and second one is to filter from the data source. Two protocols may help to turn this control into simple drop down and selection control.

@protocol NHAutoCompleteTextFieldDataFilterDelegate 

@optional

/**
 If you wants to filter out records. It should return YES.
 */
-(BOOL)shouldFilterDataSource:(NHAutoCompleteTextField *)autoCompleteTextBox;

/**
 This function will help out to keep the filtered records only.
 */
-(void)autoCompleteTextBox:(NHAutoCompleteTextField *)autoCompleteTextBox didFilterSourceUsingText:(NSString *)text;

@end

@protocol NHAutoCompleteTextFieldDataSourceDelegate 

@required;

/**
 Depicts the items available in the list.
 */
- (NSInteger)autoCompleteTextBox:(NHAutoCompleteTextField *)autoCompleteTextBox numberOfRowsInSection:(NSInteger)section;

/**
 Create a customized cell as per your need.
 */
- (UITableViewCell *)autoCompleteTextBox:(NHAutoCompleteTextField *)autoCompleteTextBox cellForRowAtIndexPath:(NSIndexPath *)indexPath;

@end

Include just one file in your view-controller:

#import "NHMainHeader.h"
@interface ViewController : UIViewController
{
  
}

Flexibility to control the drop down direction of the control:

typedef enum
{
    NHDropDownDirectionUp,
    NHDropDownDirectionDown
    
} NHDropDownDirection;

Example:

- (void)viewDidLoad
{
    [super viewDidLoad];

     autoCompleteTextField = [[NHAutoCompleteTextField alloc] initWithFrame:CGRectMake((kScreenSize.width - controlWidth) / 2, 120, controlWidth, 18)];
    [autoCompleteTextField setDropDownDirection:NHDropDownDirectionDown];
    [autoCompleteTextField setDataSourceDelegate:self];
    [autoCompleteTextField setDataFilterDelegate:self];
}

#pragma mark - NHAutoComplete DataSource delegate functions

- (NSInteger)autoCompleteTextBox:(NHAutoCompleteTextField *)autoCompleteTextBox numberOfRowsInSection:(NSInteger)section
{

}

- (UITableViewCell *)autoCompleteTextBox:(NHAutoCompleteTextField *)autoCompleteTextBox cellForRowAtIndexPath:(NSIndexPath *)indexPath
{

}

#pragma mark - NHAutoComplete Filter data source delegate functions

-(BOOL)shouldFilterDataSource:(NHAutoCompleteTextField *)autoCompleteTextBox
{

}

-(void)autoCompleteTextBox:(NHAutoCompleteTextField *)autoCompleteTextBox didFilterSourceUsingText:(NSString *)text
{

}

Where to go from here:

Download source:

Click here to download source code

I hope you will find this control useful, and soon this will be available on github as well.

Don’t forget to share if you find it helpful and reply me if you have some integration issues. Your feedbacks are welcome.

Thank you for reading this blog.

Advertisements

8 thoughts on “NHAutoCompleteTextField

  1. Hi
    good work , but something missing. when u had more textfield and make tap gesture for dismiss the keyboard, the select in the tableview not working.
    so u need to implement function that called to remove all tapGesture when the textFieldDidBeginEditing has been called , and return them when textFieldDidEndEditing has been called.
    I did it with observer notification but for other convenience it should be at requires methods

  2. Hi Shahan, if my text field is inside a custom table view cell, which way do you think is the best way to integrate with NHautoCompleteTextField’s datasource and delegate methods?

    • @Danish, thank you for reading it and raising a query.

      Beside this query, my apologies for the late response.

      Regarding your query, IMHO, you should let the custom cell, manage this control. Pass the respected data from tableview to the custom cell using `cellForRowAtIndexPath` function and once the custom cell receives data, pass it to this control to prepare drop down data. This will help you to keep this control’s logic away from the tableview and viewcontroller’s logic.

      Also, if you supports, say, offline storage and you have to keep the manipulated data, you have to get the text from control pass it to cell and cell will hand it over to the controller, either save it or sync with the server.

      One common issue when we use textfield inside cell, is to resign keyboard, make sure the keyboard resigns before the cell is ready to reuse.

      Hope that helps!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s