Добавить Bing Map Autosuggest API в несколько полей в форме

Я хочу добавить 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>

Мне бы хотелось, чтобы функция автоподсказки работала для двух полей, чтобы я мог получить точное местоположение.

Любая помощь будет принята с благодарностью, пожалуйста!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
991
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Похоже, 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>

Демо

Другие вопросы по теме