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

Question

我正在 Web 表单应用程序中实施 Bing 地图 API 以进行地址查找等。我试过，它在 HTML 形式下效果很好。

在 ASP.NET Web 表单（具有 runat=server" 属性）中实施时，它有些失败。

我得到了建议并且能够 select 我想要的项目使用箭头键并输入，但是在网络表单中当我 select 使用 Enter 的项目时它没有设置输入控件中的值，仅当我 select 单击鼠标的项目用 selected 值填充输入时。

    <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);
}

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

Bing Map AutoSuggest API with ASP.Net web forms

javascript

c#

asp.net

autocomplete

bing-maps