javascript - 将 Bing Map Autosuggest API 添加到表单中的多个字段

Question

我希望将 Bing Maps Autosuggest API 添加到我表单中的两个字段。当我执行代码时，autosuggest 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>

我希望自动建议功能适用于这两个字段，这样我就可以获得精确的位置。

如有任何帮助，我们将不胜感激!

Answer 1

似乎支持将 Autosuggest 附加到单个输入框。含义在多个输入框的情况下，AutosuggestManager class的实例应该为每个输入框创建。以下示例对此进行了演示:

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.log(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>

Demo