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 key is hit, remove focus from
//our searchBar
searchBar.addEventListener('return', function(e){
    searchBar.blur();
});

//when the cancel button is tapped, remove focus
//from our searchBar
searchBar.addEventListener('cancel', function(e){
    searchBar.blur();
});

Now we set the search property of our TableView to our SearchBar component, and then set the filterAttribute property of our TableView to filter. We'll define this custom property called filter within each of our row objects:

//define our table view
  var tblRecipes = Ti.UI.createTableView({
    rowHeight : 70,
    search : searchBar,
  filterAttribute : 'filter' //here is the search filter which appears in TableViewRow
  });

win.add(tblRecipes);

Now, inside each row that you define while looping through your XML data, add a custom property called filter and set its value to the title text from the XML feed, as follows:

//this method will process the remote data
xhr.onload = function() { 
   var xml = this.responseXML;
   
   //get the item nodelist from our response xml object 
   var items = xml.documentElement.getElementsByTagName("item");

    //loop each item in the xml
    for (var i = 0, j=items.length; i < j; i++) {
      //create a table row
    var row = Ti.UI.createTableViewRow({
      hasChild: true,
      className: 'recipe-row',
      filter: items.item(i).getElementsByTagName("title").item(0).text //this is the data we want to search on (title)
    });

...

That's it! Run your project, and you should now have a SearchBar attached to your table view, as shown in the following screenshot. Tap it and type any part of a recipe's title to see the results filtered in your table, like this:

How it works...

In the first block of code, we simply defined our SearchBar object like any other UI component, before attaching it to the searchbar property of our TableView in the second block of code. The event listeners for SearchBar simply ensure that when the user taps either of the Search or Cancel buttons, the focus on the text input is lost and the keyboard therefore becomes hidden.

The final block of code defines just what data we are searching on. In this case, our filter property has been set to the title of the recipe. This property has to be added to each row that we define before it is bound to our TableView.