Remote/Live Table Search with Titanium Appcelerator

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!

<br />
//SEARCH BAR<br />
var search = Titanium.UI.createSearchBar({<br />
	barColor:'#77B121',<br />
	height:43,<br />
	hintText:'What\'s It Worth?',<br />
	top:0<br />
});</p>
<p>//AUTOCOMPLETE TABLE<br />
var table_data = [];<br />
var autocomplete_table = Titanium.UI.createTableView({<br />
	search: search,<br />
	scrollable: true,<br />
	top:0<br />
});<br />
win.add(autocomplete_table);</p>
<p>//<br />
// SEARCH BAR EVENTS<br />
//<br />
var last_search = null;<br />
search.addEventListener('change', function(e)<br />
{<br />
	if (search.value.length &gt; 2 &amp;&amp; search.value !=  last_search)<br />
	{<br />
		clearTimeout(timers['autocomplete']);<br />
		timers['autocomplete'] = setTimeout(function()<br />
		{<br />
			last_search =search.value;<br />
			auto_complete(search.value);<br />
		}, 300);<br />
	}<br />
	return false;<br />
});</p>
<p>function auto_complete(search_term)<br />
{<br />
	if (search_term.length &gt; 2)<br />
	{<br />
		var url = 'YOURURL' + escape( search_term);<br />
		var ajax_cache_domain = 'autocomplete';<br />
		var params = {};<br />
		var cache_for = '+7 days';<br />
		ajax.get(url, params, ajax_cache_domain, cache_for, function (response)<br />
		{<br />
			if (typeof(response) == 'object')<br />
			{<br />
				var list = response;<br />
				// Empty array &amp;quot;data&amp;quot; for our tableview<br />
				table_data = [];</p>
<p>				for (var i = 0; i &lt; list.length; i++)<br />
				{<br />
					//Ti.API.info('row data - ' + data[i].value);<br />
					var row = Ti.UI.createTableViewRow(<br />
					{<br />
						height: 40,<br />
						title: list[i].value.replace(/^\s+|\s+$/g,&quot;&quot;),<br />
						hasDetail:true<br />
					});</p>
<p>					// apply rows to data array<br />
					table_data.push(row);</p>
<p>				};</p>
<p>				// set data into tableView</p>
<p>				autocomplete_table.setData(table_data);<br />
				search.value = search.value;<br />
			}<br />
			else<br />
			{<br />
				alert(response.error);<br />
			}</p>
<p>		});<br />
	}<br />
}<br />

16 thoughts on “Remote/Live Table Search with Titanium Appcelerator

  1. Matthijs says:

    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.

  2. los7world says:

    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.

    • Leo says:

      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?

  3. Jay says:

    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

    • tony says:

      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.

  4. Pingback: Auto-complete Textfield in titanium ios & Android : Android Community - For Application Development

Leave a Reply

Your email address will not be published. Required fields are marked *