6

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.

Community
  • 1
  • 1
Ben
  • 2,143
  • 2
  • 19
  • 27

2 Answers2

11

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.

Mandar Limaye
  • 1,900
  • 16
  • 24
  • Oh! Almost got it. So now the problem is it selects the first suggestion in the autocomplete list if they type a couple of letters and then click outside the input field. I would like it so they either have to: select from the autocomplete list using their mouse, or press enter to choose the first option. – Ben May 27 '12 at 08:25
  • Glad to hear that @Mubix helped you move forward. Take the very good answer Mubix gave you, try some things to make the changes you need, and if that doesn't work, keep trying to work it out for yourself. While you are doing that work, he may decide to come back and add to his answer, but he may not. If you run into more problems and get stuck while you are working, come back and ask for help. But it's not fair to just throw more questions at Mubix and expect him to answer them before you will accept his answer. – Sean Mickey May 27 '12 at 10:16
  • I'm confused. While Mubix's answer technically changed the value of the field as desired, it also introduced additional behaviour that I can't imagine anyone would want. Wouldn't it be best for Stackoverflow's repository of information if I waited until we have come up with a solution that works completely before marking the question as answered? – Ben May 27 '12 at 11:38
  • @Ben: have made a change in the jsfiddle. Basically, added another condition to trigger selectFirstResult(). – Mandar Limaye May 27 '12 at 12:53
  • Better solution simulates a down arrow stroke to fire the places_changed event: http://stackoverflow.com/a/11703018/1380669 Geocoding gets the location but not the google place object – Plato May 02 '13 at 16:20
  • its showing unformatted results like "DelhiIndia" – Ashish Gupta Dec 29 '16 at 04:56
1

This is right but if u press enter and you have already selected an item this will select the first. So use this code:

function selectFirstResult() {
infowindow.close();
if ( $('.pac-selected').length < 0){ // this line

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);
    }
});
}   
}
Dtnand
  • 449
  • 3
  • 14