Wie eingeben deaktivieren, wenn die automatische Vervollständigung Option nicht ausgewählt: Google Maps SearchBox

Question

Mit Google Maps Searchbox mit der automatischen Vervollständigung:

Wenn ein Benutzer einen Namen eingibt, die Ergebnisse zeigt, und drücken Sie die Eingabetaste, bevor ein tatsächliches Ergebnis der Auswahl der ‚places_matched‘ Das Ereignis wird weiterhin ausgelöst und die API wählt ein Ergebnis für sie aus.

Wie kann ich den Benutzer zwingen, ein Autocomplete-Ergebnis auszuwählen/hervorzuheben oder zumindest irgendwo zu erkennen, dass er tatsächlich kein Ergebnis ausgewählt und die Anfrage blockiert hat?

die jsfiddle Siehe hier: http://jsfiddle.net/4rs1mgno/2/

Im Texteingabe, geben Sie etwas, und drücken Sie die Eingabetaste. Ich tippe "Testen" und es gibt "BYU Testing Center" aus. Ich möchte nichts passieren, da sie eigentlich keine Option gewählt haben.

Hier ist der JS-Code von der Geige:

$(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']); 
     }); 
    }); 
}); 

Dank!

Es gibt viele ähnliche Fragen hier auf SO, aber keine, die dem entsprechen.

Answer 1

Sie können die Autocomplete Service und die Places Service verwenden und das Verhalten der SearchBox nachahmen. Mit getPlacePredictions können Sie einfach das Verhalten Ihres Suchfelds und der Suchergebnisse steuern.

Dieses Beispiel hat bereits ein bisschen CSS, das es "wie" der SearchBox aussehen lässt. Sie können natürlich anpassen und verbessern. Der Code ist kommentiert, also sollte er für sich selbst sprechen.

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"></script>

Answer 2

Hier ist die aktualisierte fiddle mit der Lösung. Die Idee ist ziemlich einfach, nachdem Sie wissen, dass das Suchfeld bis zu 5 Ergebnisse speichert, jedes Mal, wenn Sie einen Schlüsselstrich lokal in Ihrem DOM-Baum haben, bis Sie eine Übereinstimmung haben. Sie werden im div.pac-container Element zwischengespeichert.

$(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']); 
    }); 
    }); 
}); 

Answer 3

Wenn der Benutzer die Eingabetaste drückt, passiert nichts.
bearbeiten 3:

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

 
     var place = searchBox.getPlace(); 
 
     if(place.address_components != null && place.address_components.length >= 1){ 
 
     console.log(place.address_components.length); 
 
     $('#output').append(place['name']); 
 
     } 
 
     
 

 
    }); 
 
    
 
});

body {   
 
    font:14px sans-serif;   
 
} 
 
input { 
 
    margin: 0.6em 0.6em 0; 
 
    width:398px; 
 
} 
 
#map_canvas {   
 
    height: 400px;   
 
    width: 400px;   
 
    margin: 0.6em;  
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maps.google.com/maps/api/js?libraries=places&region=us&language=en&sensor=false"></script> 
 
<input id="pac-input" type="text" size="50">    
 
<div id="output"></div>