Making SearchBar search a label?
How would you make a SearchBar search one or several custom labels instead of actual data of a table?
A simple code snippet of it would be MUCH appreciated.
5 Answers
-
There are two lines that are important and they each have a comment near the end. Basically we are creating a new field in each TableViewRow called filter and this field has the text we are searching. In this example I just put the text from your label in it but you can add more text by saying something like data.filter = field1 + ' ' + field2 + ' ' + field3 and then the search would look at those three fields. The other change is you tell the TableView the field that has the text to be searched.
for (var c=0;c<=8;c++) { var episodes_row = Ti.UI.createTableViewRow({height:'auto', hasChild:true}); var latest_episodeimg = Ti.UI.createImageView({ image:'../images/latest.png', left:47, bottom:2, width:'auto', height:'auto' }); var homeepisode_thumbnail = Ti.UI.createImageView({ image:image, left:5, width:60, height:34 }); var homeepisode_title = Ti.UI.createLabel({ text:jsoneps[c].title, color:'#420404', shadowColor:'#FFFFE6', shadowOffset:{x:0,y:1}, textAlign:'left', top:5, left:70, width:'auto', height:'auto', font:{fontWeight:'bold',fontSize:18} }); episodes_row.add(homeepisode_title); episodes_row.add(homeepisode_thumbnail); if (c == 0) { episodes_row.add(latest_episodeimg); } episodes_row.filter = jsoneps[c].title; // <-- This is what is going to be searched by the SearchBar data[c]=episodes_row; } var searchbar = Ti.UI.createSearchBar({ hintText:'Search Episodes...', barColor:'#000', showCancel:false, }); searchbar.addEventListener('change', function(e) { return e.value; }); searchbar.addEventListener('return', function(e) { searchbar.blur(); }); searchbar.addEventListener('cancel', function(e) { searchbar.blur(); }); var tableview = Titanium.UI.createTableView({ data:data, search:searchbar, searchHidden:false, footerView:footerView, maxRowHeight:100 });
When you create your TableView do something like this
var tableView = Ti.UI.createTableView({ data: data, search: search, filterAttribute: 'filter', // <-- This is the name of the field we created above that has the text we want to search backgroundColor: 'white' });
-
Bump! This is quite urgent!
-
See if this post helps.
http://developer.appcelerator.com/question/1211/no-search-results-in-tableview
-
I don't fully understand that… How about I just post my code and you (Someone?) looks at it?
http://pastebin.org/167150
-
Very helpful thanks John