AutoComplete TextField ios Objective C
AutoComplete Textfield shows a list of completion suggestions automatically while the user is typing. The list of suggestions is displayed below the UITextField and looks like drop-drown menu.
Below steps shows how can we achieve this in Objective C.
Step 1:
In the xib file we need to put a UITextField where the user types the name of the items to search.
Step 2:
Below the UITextField we need to place the UITableView where we need to show the suggestions list according the text entered in UITextField by the user.
Step 3:
We need to have one more tableview to show the detailed list depending on the item that has been selected from the suggestions list
Step 4:
We need to set IBOutlets as below:
UITextField - foodSearchTextField .
UITableView - autocompleteTableView;
UITableView - detailedTableView;
Place foodSearchTextField at the top of the screen.
Make sure to place the autocompleteTableView right below foodSearchTextField and detailedTableView must also be placed foodSearchTextField with its height extending till the bottom of the screen.
The height of autocompleteTableView is made to fit only 4 to 5 text items.
We need to set the following delegates for
UITextField - UITextField
UITableView - UITableViewDelegate,UITableViewDataSource.
Step 5:
We need to have 3 arrays :
autocompleteElements - To show the suggestion list depending on the text entered.
suggestionElements - To store the elements from which we need to populate autocompleteElements.
detailedElements - To show the final result list.
Step 6:
Set the delegate,datasource for the tableviews and assign values for the arrays suggestionElements and detailedElements. Set the textfield delegate too.
Hide the tableviews initially as we need to show them only when we get the matching data.
- (void)viewDidLoad {
[super viewDidLoad];
self.suggestionElements= [[NSMutableArray alloc]initWithObjects:@"Pizza",@"Pasta",@"Pastry",@"Dark Chocolate",@"Sweet Potato",@"Sweet corn",@"Dates", nil];
self.detailedElements = [[NSMutableArray alloc]initWithObjects:@"Deluxe Uno Pizza",@"Pizza thin crust",@"Pepperoni Pizza",@"Lowfat Thin Crust Pizza with Meat and Vegetables",@"Medium Pepperoni Hand-Tossed Style Pizza",nil];
self.autocompleteElements = [[NSMutableArray alloc] init];
self.foodSearchTextField.delegate = self;
self.autocompleteTableView.delegate = self;
self.autocompleteTableView.dataSource = self;
self.autocompleteTableView.scrollEnabled = YES;
self.autocompleteTableView.hidden = YES;
self.detailedTableView.hidden = YES;
}
Step 7:
Implementing the UITextField delegate method. Show autocompleteTableView only when the length of text entered is more than zero i.e when the user enters a text.
The text entered is passed to a method searchAutocompleteEntriesWithSubstring where we compare the text entered is a substring of any element in the suggestionElements array.
If the comparison result is YES then we add that item from suggestionElements array to autocompleteElements array and reload the tableview.
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
NSString *text = [textField.text stringByAppendingString:string];
if (string.length == 0) {
text = [text stringByReplacingCharactersInRange:range withString:@""];
}
if (text.length > 0) {
self.autocompleteTableView.hidden = NO;
[self searchAutocompleteEntriesWithSubstring:text];
}
else {
self.autocompleteTableView.hidden = YES;
}
return YES;
}
- (void)searchAutocompleteEntriesWithSubstring:(NSString *)substring {
[self.autocompleteElements removeAllObjects];
for(NSString *curString in self.suggestionElements) {
if ([curString.lowercaseString containsString:substring.lowercaseString]) {
[self.autocompleteElements addObject:curString];
} }
[self.autocompleteTableView reloadData];
}
Step 8:
If we have 2 UITableView then we need to have 2 counts to returned based on tableview in the context. This is the reason for having if conditions is to get the tableview context.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
int count =0;
if(tableView == self.autocompleteTableView)
{
count = [self.autocompleteElements count];
}
if(tableView == self.detailedTableView)
{
count = [self.detailedElements count];
}
return count;
}
Step 9:
Depending on the Cellview we can have 2 different CellIdentifiers, here we have only one as we don't need any complex UI.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CellIdentifier"];
if(tableView == self.autocompleteTableView)
{
if (cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"CellIdentifier"];
;
}
cell.textLabel.text = [self.autocompleteElements objectAtIndex:indexPath.row];
}
if(tableView == self.detailedTableView)
{
if (cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"CellIdentifier"];
;
}
cell.textLabel.text = [self.detailedElements objectAtIndex:indexPath.row];
}
return cell;
}
Step 10:
didSelectRowAtIndexPath is implemented only for autocompleteTableView. Here we need to set the
foodSearchTextField text to the item selected from the autocompleteTableView. Finally the autocompleteTableView is hidden and detailedTableView is shown.
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
self.foodSearchTextField.text = [self.autocompleteElements objectAtIndex:indexPath.row];
self.autocompleteTableView.hidden = YES;
self.detailedTableView.hidden = NO;
}
Finally the result will be as shown:
Comments
Post a Comment