CODEWITHSUNDEEP
javascriptjqueryjquery-autocomplete
Jseb
Jseb

Reputation: 1934

Jquery with autocomplete trigger after selecting an element

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

Upvotes: 0

Views: 593

Answers (1)

Brian Vanderbusch
Brian Vanderbusch

Reputation: 3339

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

Upvotes: 2

Related Questions