Created
April 22, 2015 22:53
-
-
Save heysamtexas/06a480f9b6cca140160d to your computer and use it in GitHub Desktop.
Appcelerator titanium google places autocomplete
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//AUTOCOMPLETE TABLE | |
var table_data = []; | |
var last_search = null; | |
var timers = []; | |
// NOTE: iOS and Android keys will be different! | |
var IOS_API_KEY = 'xxx__APIKEY___xxx'; | |
var ANDROID_API_KEY = ''; | |
// TODO: pick the right key | |
var API_KEY = IOS_API_KEY; | |
var container = Ti.UI.createView({ | |
layout : 'vertical', | |
height : Ti.UI.SIZE | |
}); | |
var autocomplete_table = Ti.UI.createTableView({ | |
height: Ti.UI.SIZE | |
}); | |
var field = Ti.UI.createTextField({ | |
borderStyle : Ti.UI.INPUT_BORDERSTYLE_NONE, | |
width : "95%", | |
height : 40, | |
hintText : "Location or address..." | |
}); | |
container.add(field); | |
container.add(autocomplete_table); | |
field.addEventListener('change', function(e) { | |
if (field.value.length > 2 && field.value != last_search) { | |
clearTimeout(timers['autocomplete']); | |
timers['autocomplete'] = setTimeout(function() { | |
last_search =field.value; | |
auto_complete(field.value); | |
}, 300); | |
} | |
return false; | |
}); | |
autocomplete_table.addEventListener('click', function(e) { | |
get_place(e.row.place_id); | |
}); | |
function get_place(place_id) { | |
// https://developers.google.com/places/webservice/autocomplete | |
var url = "https://maps.googleapis.com/maps/api/place/details/json?placeid=" + place_id + "&key=" + API_KEY; | |
var client = Ti.Network.createHTTPClient({ | |
onload : function(e) { | |
//Ti.API.info("Received text: " + this.responseText); | |
var obj = JSON.parse(this.responseText); | |
var result = obj.result; | |
container.place_id = place_id; | |
container.formatted_address = result.formatted_address; | |
container.latitude = result.geometry.location.lat; | |
container.longitude = result.geometry.location.lng; | |
field.value = container.formatted_address; | |
field.blur(); | |
table_data = []; | |
autocomplete_table.setData(table_data); | |
autocomplete_table.setHeight(0); | |
}, | |
onerror : function(e) { | |
Ti.API.debug(e.error); | |
alert('error'); | |
}, | |
timeout : 5000 // in milliseconds | |
}); | |
client.open("GET", url); | |
client.send(); | |
} | |
function get_locations(query) { | |
// https://developers.google.com/places/webservice/autocomplete | |
var url = "https://maps.googleapis.com/maps/api/place/autocomplete/json?input=" + query + "&key=" + API_KEY; | |
var client = Ti.Network.createHTTPClient({ | |
onload : function(e) { | |
//Ti.API.info("Received text: " + this.responseText); | |
var obj = JSON.parse(this.responseText); | |
var predictions = obj.predictions; | |
table_data = []; | |
autocomplete_table.removeAllChildren(); | |
autocomplete_table.setHeight(Ti.UI.SIZE); | |
for (var i = 0; i < predictions.length; i++) { | |
var row = Ti.UI.createTableViewRow({ | |
height: 40, | |
title: predictions[i].description, | |
place_id: predictions[i].place_id, | |
hasDetail:false | |
}); | |
table_data.push(row); | |
} | |
table_data.push({ description: 'Powered by google' }); | |
autocomplete_table.setData(table_data); | |
//search.value = search.value; | |
}, | |
onerror : function(e) { | |
Ti.API.debug(e.error); | |
alert('error'); | |
}, | |
timeout : 5000 // in milliseconds | |
}); | |
client.open("GET", url); | |
client.send(); | |
} | |
function auto_complete(search_term) | |
{ | |
if (search_term.length > 2) { | |
get_locations(search_term); | |
} | |
} | |
module.exports = container; | |
/* | |
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); | |
} | |
}); | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment