单击外部选择列表时，防止 Google 放置自动完成关闭选择列表（pac-container）

Question

我希望 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(); 
 });

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

Answer 1

根据 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();
});