Problem with createSearchBar. How to search in TableViewRow ? (Titanium mobile)

You must Login before you can answer or comment on any questions.

Hi Guys,

I have a question. Please see part of my code: 

//load XML feed
var xhr = Titanium.Network.createHTTPClient();
xhr.open('GET','http://example.com/feed.xml');
xhr.onload = function() {
    var doc = this.responseXML.documentElement;
    var elements = doc.getElementsByTagName("Sample");
    var data = [];
    for (var i=0;i<elements.length;i++) {           
        var name = elements.item(i).getElementsByTagName("Name").item(0).text; 
        var workplace = elements.item(i).getElementsByTagName("WorkPlace").item(0).text; 
 
        var name_label = Titanium.UI.createLabel({
            text:i + ". " + name,
            height:'auto',
            width:'auto',
            left:10,
            right:10,
            top:10,
            color:'#222222',
            font:{
                fontSize:14,
                fontFamily:'Helvetica Neue',
                fontWeight:'bold'
            }
        });
 
        var workplace_label = Titanium.UI.createLabel({
            text:workplace,
            height:'auto',
            width:'auto',
            left:10,
            right:10,
            bottom:10,
            color:'#999',
            font:{
                fontSize:12,
                fontFamily:'Helvetica Neue'
            }
        });
 
        var row = Titanium.UI.createTableViewRow({
            height:'auto',
            hasChild:true,
            name:name,
            place:workplace
        });
 
        row.add(name_label);
        row.add(workplace_label);
        data[i] = row;
    }
 
    var searchBar = Titanium.UI.createSearchBar({
        barColor:'#9d9d9d',
        showCancel:false,
        hintText:'Wpisz nazw? stanowiska'
    });
 
    searchBar.addEventListener('change', function(e){
        e.value;
    });
 
    searchBar.addEventListener('return', function(e){
        searchBar.blur();
    });
 
    searchBar.addEventListener('cancel', function(e){
        searchBar.blur();
    });
 
    var tableview = Titanium.UI.createTableView({
        data:data,
        minRowHeight:60,
        search:searchBar,
        searchHidden:true
    });
};
xhr.send();
I have a problem with searchBar. I would like to search name_label values. How can I do that ? Probably there is something wrong with this part of the code: 
searchBar.addEventListener('change', function(e){
    e.value;
});
Any help appreciated :)

— asked 11 months ago by Jakub Ch
0 Comments

3 Answers

Accepted Answer

You need to tell the tableview which property should be searched. That is the filterAttribute. Check the docs

That means you basically add a custom property to the row, what you already did by adding name . Now you need to tell the tableview, that it should search this field by adding :

var tableview = Titanium.UI.createTableView({
...
    filterAttribute : 'name'
});

Hi Jakub

You can do this by making one change to your code.

Amend your table create as follows; 

var tableview = Titanium.UI.createTableView({
    data:data,
    filterAttribute: 'name', // the extra property for you to use
    minRowHeight:60,
    search:searchBar,
    searchHidden:true
});
This will then link to the extra field you have already added to the row create. 
var row = Titanium.UI.createTableViewRow({
    height:'auto',
    hasChild:true,
    name:name, // this one
    place:workplace
});
The filterAttribute lets you map the search filter facility to a different field that the default title.

For clarification it maps to the left side rather than the right - your extra has both. So if you wanted to search workplace then you could simply change the variable you pass to your custom attribute of name. 

name: workplace
This will work as your filterAttribute still maps to name. Which you could always change to something else as long as it is not already used by Titanium.

Hope that helps you.

Add two attributes to your tableView

filterAttribute : 'filter'
filterCaseInsensitive : true
And when you create your tableViewRow add the same filterAttribute name 
var row = Ti.UI.createTableViewRow({ filter:'<the text you want to be searchable >'});

Your Answer

This question has been locked and cannot accept new answers.