Bing使用ASP.Net Web表单映射AutoSuggest API

Question

我正在Web表单应用程序中实现Bing Map API以进行地址查找等。我尝试过this way，它在HTML表单中运行良好。

当在ASP.NET Web窗体中实现（使用runat=server"属性）时，它会稍微失败。

我得到了建议，并且能够使用箭头键选择我想要的项目并输入，但是当我使用Enter选择项目时，在Web表单中，它不会在输入控件中设置值，只有当我选择了项目时单击鼠标可使用所选值填充输入。

    <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

这是预期的行为，您可以考虑阻止enter按钮提交每个这样的表单：

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

或每个输入元素：

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

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

哪里

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