Я хочу добавить Bing Maps Autosuggest API в два поля в моей форме. Когда я выполняю код, API автозаполнения работает только для одного поля, а не для другого.
Ниже то, что я получил до сих пор:
<script type='text/javascript'>
function loadMapScenario() {
Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
callback: onLoad,
errorCallback: onError
});
function onLoad() {
var options = { maxResults: 8 };
var manager = new Microsoft.Maps.AutosuggestManager(options);
manager.attachAutosuggest('#searchBox', '#searchBoxContainer', selectedSuggestion);
manager.attachAutosuggest('#searchBoxPlaceBirth', '#searchBoxContainerPlaceBirth', selectedSuggestionPlaceBirth);
}
function onError(message) {
document.getElementById('printoutPanel').innerHTML = message;
}
function selectedSuggestion(suggestionResult) {
document.getElementById('searchBox').innerHTML =
suggestionResult.formattedSuggestion;
}
function selectedSuggestionPlaceBirth(suggestionResult) {
document.getElementById('searchBoxPlaceBirth').innerHTML =
suggestionResult.formattedSuggestion;
}
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=Bing Map Key&callback=loadMapScenario' async defer></script><form action = "Test" method = "post">
<div style = "height: 100px;"></div>
<div class = "row">
<div class = "col-lg-12">
<h2>Type your location in the following address bar</h2>
<div class = "row">
<div class = "col-lg-12" id='printoutPanel'> </div>
</div>
<div id='searchBoxContainer'><input type='text' id='searchBox' name='searchBox' placeholder = "Search a Location" class = "form-control" /></div>
<div id='searchBoxContainerPlaceBirth'><input type='text' id='searchBoxPlaceBirth' name='searchBoxPlaceBirth' placeholder = "Place of birth" class = "form-control" /></div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
</div>
</div>
</form>Мне бы хотелось, чтобы функция автоподсказки работала для двух полей, чтобы я мог получить точное местоположение.
Любая помощь будет принята с благодарностью, пожалуйста!



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Похоже, Autosuggest поддерживается для прикрепления только для одного поля ввода. Это означает, что в случае нескольких полей ввода экземпляр AutosuggestManager класс должен быть создан для каждого поля ввода. Следующий пример демонстрирует это:
function bingMapsReady() {
Microsoft.Maps.loadModule("Microsoft.Maps.AutoSuggest", {
callback: onLoad,
errorCallback: logError,
credentials: 'Ap12Gwv9esg5iXgfAh5Ehlbf36MZ-O8051Sl66Zm6glGwq7PSaaKgGPpcOUEGICy'
});
function onLoad() {
var options = { maxResults: 8 };
initAutosuggestControl(options, "searchBox", "searchBoxContainer");
initAutosuggestControl(options, "searchBoxAlt", "searchBoxContainerAlt");
}
}
function initAutosuggestControl(
options,
suggestionBoxId,
suggestionContainerId
) {
var manager = new Microsoft.Maps.AutosuggestManager(options);
manager.attachAutosuggest(
"#" + suggestionBoxId,
"#" + suggestionContainerId,
selectedSuggestion
);
function selectedSuggestion(suggestionResult) {
document.getElementById(suggestionBoxId).innerHTML =
suggestionResult.formattedSuggestion;
}
}
function logError(message) {
console.info(message);
}<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">
<script
type = "text/javascript" src = "https://www.bing.com/api/maps/mapcontrol?callback=bingMapsReady" async defer></script>
<form>
<div class = "form-group">
<label for = "searchBox">Address</label>
<div id = "searchBoxContainer"><input class = "form-control" type = "text" id = "searchBox" /></div>
</div>
<div class = "form-group">
<label for = "searchBoxAlt">Alternative Address</label>
<div id = "searchBoxContainerAlt"><input class = "form-control" type = "text" id = "searchBoxAlt" /></div>
</div>
<button type = "submit" class = "btn btn-primary">Submit</button>
</form>