Currently, I am integrating the Bing Map API into a web forms application for address lookup functionality. I attempted to follow this method, which worked seamlessly in an HTML form.
However, when I tried implementing it in an ASP.NET Web Form (with the runat=server" attribute), I encountered some issues.
While I am able to see the suggestions and select the desired item using arrow keys followed by Enter key press, the values are not being set in the input control upon selection with the enter key. It seems that only mouse clicks correctly populate the input with selected values within a web form environment.
<script type="text/javascript>
function bingMapsReady() {
Microsoft.Maps.loadModule("Microsoft.Maps.AutoSuggest", {
callback: onLoad,
errorCallback: logError,
credentials: 'xxxxxxx'
});
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);
}
</script>
<div class="col-lg-6">
<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>
</div>
<script
type="text/javascript"
src="https://www.bing.com/api/maps/mapcontrol?key=xxxxxxx&callback=bingMapsReady" async defer></script>