How to disable enter when autocomplete option not selected: Google Maps SearchBox

Question

Using Google Maps Searchbox with autocomplete:

If a user enters a name that displays results, and hit Enter before selecting an actual result, the 'places_matched' event still fires and the API chooses a result for them.

How can I force the user to select/highlight an autocomplete result, or at least detect somewhere that they didn't actually select a result and block the request?

See the jsfiddle here: http://jsfiddle.net/4rs1mgno/2/

In the text input, enter anything, and hit enter. I type 'testing' and it outputs "BYU Testing Center". I want nothing to happen, since they didn't actually select an option.

Here's the JS code from the fiddle:

 $(function(){      
 var input = document.getElementById('pac-input');
    var options = {
      keyword: 'establishment'
    }
    var searchBox = new google.maps.places.SearchBox(input, options);

    searchBox.addListener('places_changed',     function(evt) {
      console.log('changed');

      var places = searchBox.getPlaces();

      if (places.length == 0) {
        return;
      }
      places.forEach(function(place) {
        $('#output').append(place['name']);
      });
    });
});

Thanks!

There are a lot of similar questions here on SO, but none that match this.

Answer 1

You can use the Autocomplete Service and the Places Service and mimic the behavior of the SearchBox. Using getPlacePredictions you can easily control the behavior of your search field and the search results items.

This example already has a bit of CSS that makes it look "like" the SearchBox. You can adapt and enhance of course. The code is commented so it should speak for itself.

var autocompleteService, placesService, results, map;

function initialize() {

  results = document.getElementById('results');

  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(50, 50)
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  // Bind listener for address search
  google.maps.event.addDomListener(document.getElementById('address'), 'input', function() {

    results.style.display = 'block';
    getPlacePredictions(document.getElementById('address').value);
  });

  // Show results when address field is focused (if not empty)
  google.maps.event.addDomListener(document.getElementById('address'), 'focus', function() {

    if (document.getElementById('address').value !== '') {

      results.style.display = 'block';
      getPlacePredictions(document.getElementById('address').value);
    }
  });

  // Hide results when click occurs out of the results and inputs
  google.maps.event.addDomListener(document, 'click', function(e) {

    if ((e.target.parentElement.className !== 'pac-container') && (e.target.parentElement.className !== 'pac-item') && (e.target.tagName !== 'INPUT')) {

      results.style.display = 'none';
    }
  });

  autocompleteService = new google.maps.places.AutocompleteService();
  placesService = new google.maps.places.PlacesService(map);
}

// Get place predictions
function getPlacePredictions(search) {

  autocompleteService.getPlacePredictions({
    input: search,
    types: ['establishment', 'geocode']
  }, callback);
}

// Get place details
function getPlaceDetails(placeId) {

  var request = {
    placeId: placeId
  };

  placesService.getDetails(request, function(place, status) {

    if (status === google.maps.places.PlacesServiceStatus.OK) {

      var center = place.geometry.location;
      var marker = new google.maps.Marker({
        position: center,
        map: map
      });

      map.setCenter(center);

      // Hide autocomplete results
      results.style.display = 'none';
    }
  });
}

// Place search callback
function callback(predictions, status) {

  // Empty results container
  results.innerHTML = '';

  // Place service status error
  if (status != google.maps.places.PlacesServiceStatus.OK) {
    results.innerHTML = '<div class="pac-item pac-item-error">Your search returned no result. Status: ' + status + '</div>';
    return;
  }

  // Build output for each prediction
  for (var i = 0, prediction; prediction = predictions[i]; i++) {

    // Insert output in results container
    results.innerHTML += '<div class="pac-item" data-placeid="' + prediction.place_id + '" data-name="' + prediction.terms[0].value + '"><span class="pac-icon pac-icon-marker"></span>' + prediction.description + '</div>';
  }

  var items = document.getElementsByClassName("pac-item");

  // Results items click
  for (var i = 0, item; item = items[i]; i++) {

    item.onclick = function() {

      getPlaceDetails(this.dataset.placeid);
    };
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

body,
html {
  font-family: Arial, sans-serif;
  padding: 0;
  margin: 0;
  height: 100%;
}

#map-canvas {
  height: 150px;
  width: 200px;
  margin-bottom: 10px;
}

.search {
  width: 200px;
  padding: 5px;
  float: left;
}

label {
  display: block;
  width: 160px;
  font-size: 11px;
  color: #777;
  margin-bottom: 5px;
}

input {
  border: 1px solid #ccc;
  width: 170px;
  padding: 3px 5px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.pac-container {
  background-color: #fff;
  z-index: 1000;
  border-radius: 2px;
  font-size: 11px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  width: 170px;
}

.pac-icon {
  width: 15px;
  height: 20px;
  margin-right: 7px;
  margin-top: 6px;
  display: inline-block;
  vertical-align: top;
  background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
  background-size: 34px;
}

.pac-icon-marker {
  background-position: -1px -161px;
}

.pac-item {
  cursor: pointer;
  padding: 0 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 30px;
  vertical-align: middle;
  text-align: left;
  border-top: 1px solid #e6e6e6;
  color: #999;
}

.pac-item:hover {
  background-color: #efefef;
}

.pac-item-error,
.pac-item-error:hover {
  color: #aaa;
  padding: 0 5px;
  cursor: default;
  background-color: #fff;
}

<div class="search">
  <label for="address">Address:</label>
  <input id="address" placeholder="Enter address" type="text" tabindex="1" />
  <br />
  <div id="results" class="pac-container"></div>
</div>
<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

Answer 2

Here is the updated fiddle with the solution. The idea is quite simple after knowing the searchbox caches up to 5 results everytime you have a key stroke locally in your DOM tree until you have a match. They are cached in the div.pac-container element.

 $(function(){      
   var input = document.getElementById('pac-input');
   var options = {
      keyword: 'establishment'
   }
   var searchBox = new google.maps.places.SearchBox(input, options);

   searchBox.addListener('places_changed',  function(evt) {

     var places = searchBox.getPlaces();

     if ($('.pac-item').length > 0) {
       return;
     }

     places.forEach(function(place) {
       $('#output').append(place['name']);
     });
   });
});