Add Bing Map Autosuggest API to multiple fields in a form

Question

I wish to add the Bing Maps Autosuggest API to two fields in my form. When I execute the code, the autosuggest API works just for one field and not the other.

Below is what I got so far :

<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>

I'll like the autosuggest functionality to work for the two fields, so I can get precise locations.

Any help will be greatly appreciated, please!

Answer 1

It appears Autosuggest is supported to be attached per a single input box only. Meaning in case of multiple input boxes, the instance of AutosuggestManager class should be created per every input box. The following example demonstrates it:

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