带有 ASP.Net Web 表单的 Bing Map AutoSuggest API答案

【问题标题】：Bing Map AutoSuggest API with ASP.Net web forms带有 ASP.Net Web 表单的 Bing Map AutoSuggest API
【发布时间】：2019-08-08 07:07:41
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript c# asp.net autocomplete bing-maps

【解决方案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);
}

【讨论】：