Google Maps Places API V3 Autocomplete - Select First Option on Enter

Google maps Places API V3 autocomplete - select first option on enter

I had the same issue when implementing autocomplete on a site I worked on recently. This is the solution I came up with:

$("input").focusin(function () {
    $(document).keypress(function (e) {
        if (e.which == 13) {
            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);

                        $(".pac-container .pac-item:first").addClass("pac-selected");
                        $(".pac-container").css("display","none");
                        $("#searchTextField").val(firstResult);
                        $(".pac-container").css("visibility","hidden");

                    moveMarker(placeName, latlng);

                }
            });
        } else {
            $(".pac-container").css("visibility","visible");
        }

    });
});

http://jsfiddle.net/dodger/pbbhH/

Google maps Places API V3 autocomplete - select first option on enter (and have it stay that way)

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.

How to automatically select autocomplete place suggestions when the page first loads?

I had some trouble with something like this earlier this year. You need to grab the first item of the select input. Useful answer here, about how to grab it on pressing enter (simulates a down-arrow press): Google maps Places API V3 autocomplete - select first option on enter.

Specifically, see the second answer. Here's a bit of the most useful code, though you'll have to modify it a bit. Remove the bit about simulating the enter button (the 13 below) and cause it to happen on page load instead after the value has been set.

    function addEventListenerWrapper(type, listener) {
        // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
        // and then trigger the original listener.
        if (type == "keydown") {
            var orig_listener = listener;
            listener = function(event) {
                var suggestion_selected = $(".pac-item-selected").length > 0;
                if (event.which == 13 && !suggestion_selected) {
                    var simulated_downarrow = $.Event("keydown", {
                        keyCode: 40,
                        which: 40
                    });
                    orig_listener.apply(input, [simulated_downarrow]);
                }

                orig_listener.apply(input, [event]);
            };
        }

        _addEventListener.apply(input, [type, listener]);
    }

A simpler way might be to simulate a keyup event after page load, then trigger the autocomplete places_changed. This would be in jQuery:

$('#pac-input').val('My Passed City');
$('#pac-input').keyup(function() {
    // Can use this to pass over, or select manually 
    var firstResult = $(".pac-container .pac-item:first").text();
    // Fire the selection event
    google.maps.event.trigger(autocomplete, 'place_changed');
});
$('#pac-input').keyup();

See this answer for more about making sure the dropdown is triggered correctly, note the bit about passing arguments to the trigger function.

Google Places Autocomplete - Click first result on blur

Try this:

DEmo: http://jsfiddle.net/q7L8bawe/

Add this event :

$("#pick-auto").blur(function (e) {
        if (e.which == 13) {
            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);

                        $(".pac-container .pac-item:first").addClass("pac-selected");
                        $(".pac-container").css("display","none");
                        $("#pick-auto").val(firstResult);
                        $(".pac-container").css("visibility","hidden");

                }
            });
        } else {
            $(".pac-container").css("visibility","visible");
        }

    });

---

Related Topics