Question

我的问题是Google Place API。我无法将2个输入设置为自动完成。我从后端的有效负载读取的第一个输入，第二个输入是引导程序模式

我尝试了Web上的其他解决方案，有很多示例，但没有用。我阅读了文档，并且没有出现自动完成功能的多次输入

function googleAutocompleteSettings() {
  const optionsGoogleAutocomplete = {
    types: ['(cities)'],
    componentRestrictions: {country: "cl"}
  };

  $('.google_autocomplete').each( function () {
    const input = this;
    const googleAutocomplete = new google.maps.places.Autocomplete(input, optionsGoogleAutocomplete);
    googleAutocomplete.inputId = input.id;
    googleAutocomplete.parentDiv = $(input).parent()[0];
    console.log("googleAutocomplete", googleAutocomplete);
    googleAutocomplete.addListener('place_changed', fillInGoogleInput);
  })
}

function fillInGoogleInput() {
  const place = this.getPlace();
}

初始化为：

googleAutocompleteSettings();

html输入是这样的：

<!-- First input is generated from a payload that I recived from backend  -->
<label for="estate_location">¿En qué Comuna o Ciudad buscas una propiedad?</label>
<input type="text" class="form-control google_autocomplete" id="input_estate_location" name="estate_location">

<!-- the second input is pure html, but it's in a bootstrap modal -->
<label for="attention_place">¿Donde quieres que te atiendan?</label>
<input type="text" class="form-control google_autocomplete" id="attention_place" name="attention_place">

我这样做，两个输入都向API发送请求。但只有第一个输入具有自动完成框。第二个输入，如前面所说的，发出了请求，但是自动完成框没有出现

这是jsfiddle： https://jsfiddle.net/2gxmcnsv/2/

我无法放置Google Places API的API_KEY，因为它是为其他人付费的。

Answer 1

我的问题仅仅是CSS。

这解决了我的问题：

.pac-container {
    z-index: 10000 !important;
}

Google Places API的多次输入不起作用

1 个答案: