Searching on Table with Titanium on CrossPlatfrom App

Introduction
Generally we use table-view to display data in different rows with table format in an application and adding search functionality on those table data is very common. So let me demonstrate the ways to search data among the table rows.

Description
To display data in row format Titanium provides API called Table-View. So lets use table-view to display data on screen and then will add search functionality. Suppose we have a window called home where we will have our table.

//Define current window var homeWin = Ti.UI.currentWindow;
Here we have defined home window.

//Define items var item = [

{ itemName  : 'First Item' },
{  itemName : 'Second Item' },
{  itemName : 'Third Item' },
{  itemName : 'Fourth Item' },
{  itemName : 'Fifth Item' }
];

An arraylist is defined with list of data that will be added as rows on table.

//Define row data
var tableRowData = [];

//  Defined counter
var count = 0;

//Loop to make rows
for(count = 0; count < item.length; count++){

//Define row
var row = Ti.UI.createTableViewRow({
title : item[count].itemName,
filter: item[count].itemName     // Item assigned for search contents
});
tableRowData.push(row);
}

So before having table lets creates rows. On above code an array list is defined to hold the different row that will be add on table. Then used a for loop to
make individual rows. To make row Titanium provides an API called TableViewRow, where it has ‘title’ property which is generally used to display data on rows where item name is  added.

Now along with title property we have filter property which gives the response on search functionality. Generally when we search anything, we actually search
on the text that are assigned to filter property.

//Define search bar
var mySearchBar = Ti.UI.createSearchBar();

//Define table
var itemTable = Ti.UI.createTableView({
width    : Ti.UI.FILL,
height   : 200,
top      : 0,
search   : mySearchBar,      //Search bar added to the table
data     : tableRowData,     //Assign row data
filterAttribute :'filter'    //Assigned the filter attribute for searching
});

//Table added to the window
homeWin.add(productTable);

On above code at first defined a search bar that will be used to search data on table followed by the table view to display our defined items. To associate the search bar API with table, table view has property called  ‘search’ where we assigned our search bar, where on typing on that it will filter table data as per the typed text. Then we have ‘data’ property for  tableview which allows to assign all our created rows to the table and finally the ‘filterAttribute’ where we mention the property name that upon which we  will search, that is mentioned while defining rows.Now if anyone type ‘f’ on search bar it instantly display the rows having ‘f’ text. Here it will display row with text ‘First Item’.

So now we have learned how can add search functionality on table view to filter rows. But now there might be a scenario when we have item on rows and if there  we have type any text that is present on item details but not on that item, at that time we can also have search functionality which can filter item and also
with item details. So lets do that.

//Define item details
var itemDetails = [
{ details : I am item 1 },
{ details : I am item 2 },
{ details : I am item 3 },
{ details : I am item 4 },
{ details : I am item 5 }
];

Here  we mentioned item details. Now to have search on item and item details we need to modify the filter property while creating row a little bit.

//Loop to make rows
for(count = 0; count < item.length; count++){
//Define row
var row = Ti.UI.createTableViewRow({
title : item[count].itemName,
filter: item[count].itemName +  itemDetails[count].details     // Item assigned for search contents
});
tableRowData.push(row);
}

So here on above code while assigning ‘filter’ property we have assigned item and added item details with that which will allow to search on item along with item
details.

Summary
So  here we have discussed about search functionality on table data using filter attribute.

Written ByRaju Mahato, Software Developer, Mindfire Solutions

Advertisements

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