Filtering the TableView using a SearchBar component

What happens when your user wants to search for all that data in your TableView? By far the easiest way is to use the SearchBar component. This is a standard control that consists of a searchable text field with a cancel button, that sits ontop of your TableView using the table view's searchBar property.

In this next recipe, we'll implement in our MyRecipes app a SearchBar component that filters our recipes based on the title property.

How to do it...

First of all, create a SearchBar component. Do this before your TableView is defined. Then we'll create the event listeners for SearchBar:

//define our search bar which will attach 
//to our table view
var searchBar = Ti.UI.createSearchBar({
    showCancel:true,
    height:43,
    top:0
});

//print out the searchbar value whenever it changes
searchBar.addEventListener('change', function(e){
  //search the tableview as user types
console.log('user searching for: ' + e.value);
});

//when the return...