API Bing Map AutoSuggest с веб-формами ASP.Net - PullRequest
Новая
       26

API Bing Map AutoSuggest с веб-формами ASP.Net

1 голос
/ 18 марта 2019

Я реализую API-интерфейс Bing Map в приложении веб-форм для поиска адресов и т. Д. Я пробовал таким образом , который прекрасно работает в форме HTML.

При реализации в веб-форме ASP.NET (с атрибутом runat=server") это несколько сбой.

Я получаю предложения и могу выбрать нужный элемент с помощью клавиши со стрелкой и ввести, но в веб-форме, когда я выбираю элемент с помощью 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>

1 Ответ

1 голос
/ 04 апреля 2019

Это ожидаемое поведение, вы можете запретить отправку кнопки 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);
}
...