Bing Map AutoSuggest API with ASP.Net web forms

Question

I am implementing a Bing Map API in a web forms application for address lookup etc. I have tried this way which works great in an HTML form.

When implemented in an ASP.NET Web Form (with the runat=server" attribute) it fails somewhat.

I get the suggestions and am able to select the item I want with an arrow key and enter, but in a web form when I select the item with Enter it does not set the values in the input control, only when I select the item with a mouse click fills the input with the selected values.

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

Answer 1

This is the expected behavior, you could consider to prevent enter button submit per a form like this:

document.querySelector('form').addEventListener('submit', function (e) {
        e.preventDefault();
}, false); 

or per input element:

 function onLoad() {
     var options = { maxResults: 8 };
     initAutosuggestControl(options, "searchBox", "searchBoxContainer");
     initAutosuggestControl(options, "searchBoxAlt", "searchBoxContainerAlt");

     disableInputSubmit(document.querySelector('#searchBox'));
     disableInputSubmit(document.querySelector('#searchBoxAlt'));
 }

where

function disableInputSubmit(element) {
     element.addEventListener('keypress', function(e){
         if (e.which === 13) // Enter key = keycode 13
         {
            e.preventDefault();
         }
     },false);
}