Tag: Mobile

Titanium mobile has a build in search feature for iOS and Android devices. It is mostly used on tableViews or listViews. But how are the search methods and properties implemented for some of the common scenarios?

The input field

In any case we need a search bar input field. Here we have the following options:

1.  The build-in Titanium.UI.SearchBar object for iOS and Android devices
2. The build-in Titanium.UI.Android.SearchView object for Android devices
3. A custom build search input field for added flexibility

searchBar (ios and android)

The searchBar is commonly used with table and list views, but can also be used independently (see searchText below). To create a searchBar use the Titanium.UI.createSearchBar method.
Simple example:

var searchBar = Titanium.UI.createSearchBar({
barColor:'#000',
showCancel:true,
height:43,
top:0,
})

android.searchView (android)

The android.searchView is similar to the searchBar above, but can be added to the action bar. See example implementation below:

// Use action bar search view
var search = Ti.UI.Android.createSearchView({
hintText: "Table Search"
});

win.activity.onCreateOptionsMenu = function(e) {
var menu = e.menu;
var menuItem = menu.add({
title: 'Table Search',
actionView : search,
icon: (Ti.Android.R.drawable.ic_menu_search ? Ti.Android.R.drawable.ic_menu_search : "my_search.png"),
showAsAction: Ti.Android.SHOW_AS_ACTION_IF_ROOM | Ti.Android.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW
});
};

Custom search bar

To get more flexibility in designing the search bar, we can use a normal Titanium text field and button to create our own search bar. For this we can use the Ti.UI.textField and Ti.UI.button objects and add them to the view.

Event Handling

The searchBar doesn’t really do anything by itself. We need to use event listeners to react when the searchBar is used.

Here are some examples:

//when text is added or changed in the searchBar we store the text in e.value
searchBar.addEventListener('change', function(e){
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();
});

Connecting it to the views

A view needs to know which input field it should use to filter the results. For this we can use some build-in properties in both the tableView and the listView.

search (tableView)

The search property is used in tableViews, and tells us which searchbar input field should be used in conjunction with the tableView.

In the below example we assume that searchBar is the variable name for the actual searchBar implemented earlier.

var listView = Titanium.UI.createListView({
templates : {'plain' : plainTemplate },
defaultItemTemplate : 'plain',
search: searchBar
});


searchView (listView)

This is the equivalent to the ‘search’ property above, but is used for listViews, not for tableViews.

var listView = Titanium.UI.createListView({
templates : {'plain' : plainTemplate },
defaultItemTemplate : 'plain',
searchView: searchBar
});

searchText (listView)

This is a second way on how to implement search with a listView. Here we display the searchBar in the listView header, and not inside the listView itself. And we pass the search bar input value directly into the listViews searchText property.

For this to work we have to change the event listener so it updates the build-in searchText property in our listView:

searchBar.addEventListener('change', function(e){
listView.searchText = e.value;
});

Then we need to tell the listView to add the searchBar into the header of the view:

var tblTrees = Titanium.UI.createListView({
templates : {'plain' : plainTemplate },
defaultItemTemplate : 'plain',
sectionIndexTitles: indices,
headerView: searchBar
});

It is possible to show the search bar outside the listView all together. For this we need to remove the headerView: searchBar line above, and instead add the searchBar directly to the window.

win.add(searchBar);
win.add(listView);

This works because we pass the search terms directly to the searchText property, and so don’t rely on the listView knowing what search field the values come from. Don’t forget to add the ‘top’ property to the listView in order to move it down and make space for the newly added searchBar, otherwise the listView might cover the searchBar.