The Collection View: Part 4 of 6

In this part of the tutorial you will learn how to implement the ability for the app user to search for a recipe by its name.

Implement The Search Bar Delegate Methods

Implementing the search function in the BevUp application is quite simple. All we have to do is implement three delegate methods of the UISearchBarDelegate protocol.

Here is the first delegate method of the UISearchBarDelegate protocol to add in the DrinkRecipesViewController.m file. It is fired when the Search Bar’s Cancel button is tapped.

#pragma mark - Search Bar delegate methods
-(void)searchBarCancelButtonClicked:(UISearchBar *)searchBar
{
  [searchBar setText:@""];
  [searchBar setShowsCancelButton:NO animated:YES];
  [searchBar resignFirstResponder];
  self.isSearchOn = NO;
  _icon.deleteButton.hidden = YES;
  [self.collectionView reloadData];
}

Code you entered in the method does the following:

• Clear out the Search Bar’s text field control and disable the Cancel button.
• Give back control to the DrinkRecipesViewController class.
• Reset the isSearchOn boolean variable, since we are done searching.
• Hide the deleteButton that appear in the Collection View Cells
• Reload it Collection View.

We are reloading the Collection View so cells the user delete doesn’t appear in the Collection View.

Before running the application you’ll have to make sure the Search Bar’s outlet property and delegate property is connected to the Drink Recipes View Controller. You’ll have to make sure the Shows Cancel Button checked box is checked. You will find it the Options group of checkboxes.

Ok, go ahead and run the application. Notice how the Cancel button appear on the Search Bar when you click Search Bar’s text field.

Here is the second Search Bar delegate method to add in the file. It is fired as soon as the user click the Search Bar’s text field.

- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar
{
  self.isSearchOn = YES;

  UIButton *cancelButton;
  UIView *topView = self.searchBar.subviews[0];
  for (UIView *subView in topView.subviews) {
    if ([subView isKindOfClass:NSClassFromString(@"UINavigationButton")]) {
      cancelButton = (UIButton*)subView;
    }
  }

  if (cancelButton) {
    // This statement change the search button's title attribute from "Cancel" to "Done:
    [cancelButton setTitle:@"Done" forState:UIControlStateNormal];
  }
}

Above method is optional; however, I implemented it to show you how to change the Search Bar’s Cancel button’s title attribute to display the text Done instead of Cancel.

Here is the final Search Bar delegate method to add in the file. It is fired as the user type text in the Search Bar’s text field.

- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText
{
  [searchBar setShowsCancelButton:YES animated:YES];
  if ([searchText length] > 0) {
    self.isSearchOn = YES;
    [self filterContentForSearchText];
    [self.collectionView reloadData];
  }
}

As you can see, the filterContentForSearchText method is called in the if() block. Here is the code to implement it. The method’s job is to pull element arrays from the drinkList array and put them in the searchResults array, only if letters you type in the search box match letters in a recipe’s name.

- (void)filterContentForSearchText
{
  [self.searchResults removeAllObjects];

  for (NSArray *recipe in self.drinkList) {
    NSString *recipeName = recipe[0];
    NSRange recipeResultsRange = [recipeName rangeOfString:self.searchBar.text options:NSCaseInsensitiveSearch];

    if(recipeResultsRange.length > 0) {
      [self.searchResults addObject:recipe];
    }
  }
}

The last thing I want you to do is add these statements in the viewDidLoad method.

self.searchResults = [[NSMutableArray alloc] init];
self.isSearchOn = NO;

Ok, we are done implement required methods for the Search Bar to work; so run the app and search for a drink recipe that exists and doesn’t exists in the plist file, to see what happen. Notice how the app automatically populate the Collection View Cells with items (drink recipes) it finds in the drinkList array, as you type. However, no Collection View Cells are displayed in the Collection View, when the app finds no drink recipe that match text you entered in the Search Bar’s text field. Also, notice the Search Bar’s button title display the text “Done” when you click in the Search Bar’s text field.

Now, put the Collection View in delete mode as shown in the image below. Go ahead a delete a cell, to see it disappear from the Collection View. Next, tap a Collection View Cell to access the Recipe Detail view.

Once you taken the Collection View out of delete mode, the Collection View returns to the default state and cells you deleted appear in the Collection View. That’s because the delete button’s method delete an array element only from the searchResults array, not the drinkList array.

This conclude the tutorial on the Collection View tutorial which show you how to use it in an iOS app. I had fun presenting it to you. 🙂