Question

I am trying to use the autocomplete jquery API. The issue is I want to trigger a function or a set of code once I selected an item but i keep getting undefined items.

Here my code:

function init()
{
    var input = document.getElementById('event_address');
    var options = 
    {
      types: ['geocode']
    };

    var autocomplete = new google.maps.places.Autocomplete(input, options);

    // event triggered when drop-down option selected
    select: function(event, ui) {
        var address = document.getElementById(event_address).value;
        geocoder.geocode( { 'address': address}, function(results, status) 
        {
            if (status == google.maps.GeocoderStatus.OK)
            {
                alert(results[0].geometry.locations);
            }
        });
    }
}

Here my errors:
Uncaught SyntaxError: Unexpected token (

Thanks

Answer 1

First, I believe what you are referring to is jqueryUI’s autocomplete widget. The select method fires when an autocomplete selection has been made. I’m assuming what you’re trying to do would be to display the coordinates of a geographical region chosen from the auto complete list.

you would need to do something like this:

$('#inputbox').autocomplete({
   select: function(event, ui){
     // code to get selection
     var address = $('#inputbox').text();
     //assuming your geocode is correct
     geocoder.geocode( { 'address': address}, function(results, status) 
    {
        if (status == google.maps.GeocoderStatus.OK)
        {
            alert(results[0].geometry.locations);
        }
    });
   }

});

For more info, see the autocomplete documentation: http://api.jqueryui.com/autocomplete/#event-select