单击外部选择列表时，防止 Google 地点自动完成关闭选择列表pac-container

问题描述

我希望 Google 地点自动完成选择列表在我在选择列表外单击时不隐藏，以便结果保持可见。

Example image pick list

示例视频
通过在选择列表外单击来关闭不需要的选择列表的示例视频：
https://vimeo.com/563347070

检查元素
在 Google Inspect Element 工具中可以看到 pac-container 在点击外部选择列表时获得样式 display: none;：
https://vimeo.com/563350922

HTML

    <div class="content">
        <div id="search-container">
            <a class="icon-container"><img src="./Sources/Icons/arrow-back-outline.svg" id="backbtn" /></a>
            <form action="#" method="post" class="searchfield">
              <label for="userAddress"> 
                <input name="userAddress" id="searchfield" type="text" placeholder="where do you want to go?" value="" onfocus="this.value = this.value;"/>
              </label>
            </form>
            <a class="icon-container"><img src="./Sources/Icons/close-circle-outline.svg" id="emptybarbtn" /></a>  
          </div>
          <div id="resultAutocompletePlaces"></div>
          <button id="checkUserLocation">Current location</button> 
        </div>
    </div>

Javascript

function initializePlacesService() {
    //initialize places service to perform TextSearch
    var input = document.getElementById('searchfield');
    var options = {
      types: []
    };
    
    autocomplete = new google.maps.places.Autocomplete(input,options);

    //places pac-container inside #resultAutocompletePlaces div
    setTimeout(function(){ 
      $(".pac-container").prependTo("#resultAutocompletePlaces");
  },300)
};

$(function(){
    initializePlacesService(); 
 });

问题
如何确保在选择列表之外单击时不会隐藏选择列表？

解决方法

根据 MrUpsidown 的评论，我发现了这个 jsfiddle：

https://jsfiddle.net/woosmap/xs8a06nh/

function debounce(func,wait,immediate) {
  let timeout;
  return function() {
    let context = this,args = arguments;
    let later = function() {
      timeout = null;
      if (!immediate) func.apply(context,args);
    };
    let callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later,wait);
    if (callNow) func.apply(context,args);
  };
}

function initAutocomplete() {
  let map = new google.maps.Map(document.getElementById('map'),{
    center: {
      lat: 48,lng: 4
    },zoom: 4,disableDefaultUI: true
  });

  // Create the search box and link it to the UI element.
  let inputContainer = document.querySelector('autocomplete-input-container');
  let autocomplete_results = document.querySelector('.autocomplete-results');
  let service = new google.maps.places.AutocompleteService();
  let serviceDetails = new google.maps.places.PlacesService(map);
  let marker = new google.maps.Marker({
    map: map
  });
  let displaySuggestions = function(predictions,status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }
    let results_html = [];
    predictions.forEach(function(prediction) {
      results_html.push(`<li class="autocomplete-item" data-type="place" data-place-id=${prediction.place_id}><span class="autocomplete-icon icon-localities"></span>                   <span class="autocomplete-text">${prediction.description}</span></li>`);
    });
    autocomplete_results.innerHTML = results_html.join("");
    autocomplete_results.style.display = 'block';
    let autocomplete_items = autocomplete_results.querySelectorAll('.autocomplete-item');
    for (let autocomplete_item of autocomplete_items) {
      autocomplete_item.addEventListener('click',function() {
        let prediction = {};
        const selected_text = this.querySelector('.autocomplete-text').textContent;
        const place_id = this.getAttribute('data-place-id');
        let request = {
          placeId: place_id,fields: ['name','geometry']
        };

        serviceDetails.getDetails(request,function(place,status) {
          if (status == google.maps.places.PlacesServiceStatus.OK) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }
            var bounds = new google.maps.LatLngBounds();
            marker.setPosition(place.geometry.location);
            if (place.geometry.viewport) {
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
            map.fitBounds(bounds);
          }
          autocomplete_input.value = selected_text;
          autocomplete_results.style.display = 'none';
        });
      })
    }
  };
  let autocomplete_input = document.getElementById('my-input-autocomplete');
  autocomplete_input.addEventListener('input',debounce(function() {
    let value = this.value;
    value.replace('"','\\"').replace(/^\s+|\s+$/g,'');
    if (value !== "") {
      service.getPlacePredictions({
        input: value
      },displaySuggestions);
    } else {
      autocomplete_results.innerHTML = '';
      autocomplete_results.style.display = 'none';
    }
  },150));
}

document.addEventListener("DOMContentLoaded",function(event) {
  initAutocomplete();
});