Question

This question relates to the answer for this one: Google maps Places API V3 autocomplete – select first option on enter. Basically, it is to make the field use the first suggestion from the autocomplete list when the user presses enter. The answer for that question has a jsfiddle – http://jsfiddle.net/dodger/pbbhH/ – which works except when the text field loses focus, the field value returns to the partially entered value.

For example, a user clicks in the input field and types ‘ox’, the autocomplete box pops up with some suggestions, and the user presses enter. The map is then changed to show the location of the first item from the autocomplete box (with a marker), and the value of the input field is changed to the first item from the autocomplete box. The user then clicks somewhere outside the field and the value of the input field returns to ‘ox’.

I would like the value of the input field to stay as the first autocomplete suggestion.

Answer 1

Try this: http://jsfiddle.net/pbbhH/60/

Basically abstracted the selection logic to a new function selectFirstResult(). Then called this function on both pressing enter and losing focus on text.

 function selectFirstResult() {
    infowindow.close();
    var firstResult = $(".pac-container .pac-item:first").text();

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({"address":firstResult }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var lat = results[0].geometry.location.lat(),
                lng = results[0].geometry.location.lng(),
                placeName = results[0].address_components[0].long_name,
                latlng = new google.maps.LatLng(lat, lng);

            moveMarker(placeName, latlng);
            $("input").val(firstResult);
        }
    });   
 }

EDIT: made minor change per @Ben’s comment below.