how to auto-select the first item in the autocomplete pop-up to address usability issue

2,974 views
Skip to first unread message

mighty

unread,
Dec 9, 2011, 9:25:51 PM12/9/11
to google-map...@googlegroups.com
My end users are not sophisticated web users and they might not get the concept of the Autocomplete selection concept. Barring any usability issues I am happy to contend with, I want to be able to trigger the place_changed event so that I can get the geo-code address information from the "FIRST" address shown in the autocomplete pop-up. This way the users can ignore the autocomplete pop-up and the feature can be "SMART" about the search criteria and default to the 1st item shown in the pop-up. 

// autocomplete call back
function callBack() {

var place = this.getPlace();

}


function auto() {
input = document.getElementById('inputSearch');

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

google.maps.event.addDomListener(autocomplete, 'place_changed', callBack);

 }

$(document).ready(function() {

          // this should trigger after user hits the tab key in the input field after entering some matched text

$(input).focusout(function(){
    // get the first item of the autocomplete pop-up
    var searchAddress = $(from).find('.pac-item:first').text();

              // update the search field with the new value
              $(input).val(searchAddress); 
 
              // trying to execute the same event as that's triggered when the user SELECTS an item from the Autocomplete pop-up
              $(from).find('.pac-item:first').trigger('click');
});

});

The problem is when I issue the click trigger, it doesn't invoke indirectly the place_changed event. this->getPlace is always 'undefined' in the autcomplete callback handler.

Any ideas?
Reply all
Reply to author
Forward
0 new messages