I recently began using Titanium Appcelerator to build an iPhone app for WorthMonkey. One of the features I love in any application, is the ability to search a table using remote data. However, this is very difficult to pull off in Appcelerator, because it’s table search work only on local data. So here’s how I got around that limitation to make a true remote search table.
First, obviously it quite easy to add a search bar to a table, so I did that then attached a listener on the “change” event. But when you attempt to do your remote call here, the built in filter fires first and overlays the current table, so updating the table contents afterward is of no help. So, the trick is to fire the filter event again, AFTER you’ve filled the table. So on line 70, I tell the filter to fire again, and on line 24 I put a check in to make sure we don’t start infinite calls. Enjoy!
//SEARCH BAR
var search = Titanium.UI.createSearchBar({
barColor:'#77B121',
height:43,
hintText:'What\'s It Worth?',
top:0
});
//AUTOCOMPLETE TABLE
var table_data = [];
var autocomplete_table = Titanium.UI.createTableView({
search: search,
scrollable: true,
top:0
});
win.add(autocomplete_table);
//
// SEARCH BAR EVENTS
//
var last_search = null;
search.addEventListener('change', function(e)
{
if (search.value.length > 2 && search.value != last_search)
{
clearTimeout(timers['autocomplete']);
timers['autocomplete'] = setTimeout(function()
{
last_search =search.value;
auto_complete(search.value);
}, 300);
}
return false;
});
function auto_complete(search_term)
{
if (search_term.length > 2)
{
var url = 'YOURURL' + escape( search_term);
var ajax_cache_domain = 'autocomplete';
var params = {};
var cache_for = '+7 days';
ajax.get(url, params, ajax_cache_domain, cache_for, function (response)
{
if (typeof(response) == 'object')
{
var list = response;
// Empty array "data" for our tableview
table_data = [];
for (var i = 0; i < list.length; i++)
{
//Ti.API.info('row data - ' + data[i].value);
var row = Ti.UI.createTableViewRow(
{
height: 40,
title: list[i].value.replace(/^\s+|\s+$/g,""),
hasDetail:true
});
// apply rows to data array
table_data.push(row);
};
// set data into tableView
autocomplete_table.setData(table_data);
search.value = search.value;
}
else
{
alert(response.error);
}
});
}
}
Nice code ! I will like to try that out in my app.
I wonder where does the ajax object come from in line 44 of your code, looks like jquery ? Seems to be able to perform caching. Would like to use that i.s.o the native Titanium.Network.HTTPClient.
Any pointers are welcome.
Sure enough I did write my own ajax object to wrap AJAX calls and then cache them. I’ll send you the code.
HI Tony,
Please suggest how to use ajax object in above code.
Thanks
Pretty neat code snippet. I’ve been trying to implement something similar. I wonder if you mind sharing your ajax calls and cache mechanism.
Cheers.
Brand new post up!
cheers mate 🙂
Will you please publish the code for your AJAX object? Thanks.
Do you know how to do a Live Table Search using a SQLite database instead? Great piece of code BTW 🙂
I am trying to do the one on SQLite aswell from a textfield. Don’t like the look of the search bar, but I keep getting No Results on the table when I pass the value of the textfield to the searchbar. Any tips?
Can I get the source code?
Pretty neat code snippet. I wonder if you mind sharing your ajax calls and cache mechanism.
Thanks
Hi Tony,
I have used your code and everything is working fine: But question is how to setup activity indicator that prevent users to interact with the row selection while the data is loading. I can see the activity indicator on the toolbar (top left). In the code below I have placed two functions showIndicator() and hideIndicator() but not sure how to implement it
Here is the link to the code…
Info: ios, sdk 1.7.5, iPhone
http://developer.appcelerator.com/question/129678/activity-indicaor-while-autocomplete
Thanks for your help
Hey Joe,
I haven’t worked on this app in quite a while, so I don’t have any advice for you. I’ll play with it in the next few days and see what I come up with.
Pingback: Auto-complete Textfield in titanium ios & Android : Android Community - For Application Development
Thank you…
Hy! Do you have a code sample? I’m new with Ti, I’m figuring out how can I get this working