javascript - 有没有一种方法可以在用户键入时使用第一个 Google Location 返回值自动填充/文本完成表单字段？

Question

我在位置表单中有一个标准字段，使用 Google Places API。

<div><input class="input_standard fakeWaitlistCity" placeholder="Location" id="autocomplete"></input></div>

当用户输入时，它会在下面显示建议。是否有设置也用第一个返回值填充该字段？

这是它目前的样子:

此处的目标是用户不能只键入“纽约”。如果他们停止输入，整个字段将填满“美国纽约州纽约市”。

这是用户类型的理想体验:

谢谢!

更新 - 我找到了 this discussion关于它的名字。

这是上面链接中的一张图片，我在说什么:

Answer 1

// Bind dollar signs to query selector (IE8+)
var $ = document.querySelector.bind(document);

function preventStandardForm(evt) {
    // prevent standard form from submitting
    evt.preventDefault();
}

function autoCallback(predictions, status) {
    // *Callback from async google places call
    if (status != google.maps.places.PlacesServiceStatus.OK) {
        // show that this address is an error
        pacInput.className = 'error';
        return;
    }

    // Show a successfull return
    pacInput.className = 'success';
    pacInput.value = predictions[0].description;
}


function queryAutocomplete(input) {
    // *Uses Google's autocomplete service to select an address
    var service = new google.maps.places.AutocompleteService();
    service.getPlacePredictions({
        input: input,
        componentRestrictions: {
            country: 'us'
        }
    }, autoCallback);
}

function handleTabbingOnInput(evt) {
    // *Handles Tab event on delivery-location input
    if (evt.target.id == "pac-input") {
        // Remove active class
        evt.target.className = '';

        // Check if a tab was pressed
        if (evt.which == 9 || evt.keyCode == 9) {
            queryAutocomplete(evt.target.value);
        }
    }
}

// ***** Initializations ***** //
// initialize pac search field //
var pacInput = $('#pac-input');
pacInput.focus();

// Initialize Autocomplete
var options = {
    componentRestrictions: {
        country: 'us'
    }
};
var autocomplete = new google.maps.places.Autocomplete(pacInput, options);
// ***** End Initializations ***** //

// ***** Event Listeners ***** //
google.maps.event.addListener(autocomplete, 'place_changed', function () {
    var result = autocomplete.getPlace();
    if (typeof result.address_components == 'undefined') {
        queryAutocomplete(result.name);
    } else {
        console.log(result.address_components);
    }
});

// Tabbing Event Listener
if (document.addEventListener) {
    document.addEventListener('keydown', handleTabbingOnInput, false);
} else if (document.attachEvent) { // IE8 and below
    document.attachEvent("onsubmit", handleTabbingOnInput);
}

// search form listener
var standardForm = $('#search-shop-form');
if (standardForm.addEventListener) {
    standardForm.addEventListener("submit", preventStandardForm, false);
} else if (standardForm.attachEvent) { // IE8 and below
    standardForm.attachEvent("onsubmit", preventStandardForm);
}
// ***** End Event Listeners ***** //

<link rel="stylesheet" href="${createLinkTo(dir:'asset/vendor/bootstrap/dist/css',file:'bootstrap.css')}">
		<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=AIzaSyBI9iSbSEo3h0LdqlqRFwnayYApQfmNXuE"></script>
		
   <form id="search-shop-form" class="search-form" name="searchShopForm" action="/impl_custom/index/search/" method="post">
    <label for="pac-input">Delivery Location</label>
    <input id="pac-input" type="text" placeholder="Los Angeles, Manhattan, Houston" autocomplete="off" />
    <button class="search-btn btn-success" type="submit">Search</button>
</form>

更新:

注意:根据您的要求，有任何选项可用于 google places。因此，您可以根据您的要求更改超时秒数。我假设在 300 毫秒内我会在下拉列表中获得建议。

$("#find").click(function(){
                  $("#geocomplete").trigger("geocode");
                });
         	
              $(function(){
                $("#geocomplete").geocomplete()        
                
              });
            $('.autoc').bind('keyup', function(e) {	  
            if(e.keyCode==13){
         $('#find').click()
            }else{
         setTimeout(function(){ 
         		var inputVal = $("#geocomplete").val();
         		var inpt = $("#geocomplete");
         		if( inputVal != "" ){
         		
         			var firstRowVal = firstRowValue();
         			if( firstRowVal != "" ){
         				if(firstRowVal.toLowerCase().indexOf(inputVal.toLowerCase()) === 0){
         					inpt.val(firstRowVal);//change the input to the first match
         					inpt[0].selectionStart = inputVal.length; //highlight from end of input
         					inpt[0].selectionEnd = firstRowVal.length;//highlight to the end
         				}
         			}
         		}
         	}, 300);// please change this 300 as per your internet connection speed.
         }
         });
         
         function firstRowValue() {
              var selected = '';
              // Check if any result is selected.
              if ($(".pac-item-selected")[0]) {
                selected = '-selected';
              }
         
              // Get the first suggestion's text.
              var $span1 = $(".pac-container:visible .pac-item" + selected + ":first span:nth-child(2)").text();
              var $span2 = $(".pac-container:visible .pac-item" + selected + ":first span:nth-child(3)").text();
         
              // Adds the additional information, if available.
              var firstResult = $span1;
              if ($span2) {
                firstResult += " - " + $span2;
              }
         
              return firstResult;
            }

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBI9iSbSEo3h0LdqlqRFwnayYApQfmNXuE"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script src="https://ubilabs.github.io/geocomplete/jquery.geocomplete.js"></script>
      <form>
         <input id="geocomplete" type="text" placeholder="Type in an address" size="50" class="autoc"/>
         <input id="find" type="button" value="find" size="10"/>
      </form>

希望对你有帮助

引用 here