none
Different ways to load autosuggest modules RRS feed

  • Question

  • Why do we need to load and initialize the autosuggest module differently, depending on if we are using the map control or not?

    When I am just loading the the autosuggest module and I am not passing in a map in the options I have to use 

     var options = {           

    maxResults: 5       

    };

    Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest',

    {                   

    callback: function () {                       

    var manager = new Microsoft.Maps.AutosuggestManager(options);                       

    manager.attachAutosuggest('#' + $autoComplete.attr("id"), '#' + $resultContainer.attr("id"), bingMaps.UpdateAddressAndMap);                   

    },                   

    error: function (e) {                       

    console.log(e);                   

    }           

    });


    But if I have a map associated with the autosuggest module I have to load and initialize it like this

    var options = {           

    maxResults: 5       

    }; 

    if (!isNullOrEmpty(map)) {         

      options.map = map;           

    microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function () {               

    var manager = new Microsoft.Maps.AutosuggestManager(options);               

    manager.attachAutosuggest('#' + $autoComplete.attr("id"), '#' + $resultContainer.attr("id"), bingMaps.UpdateAddressAndMap);           

    });       

    }




    • Edited by Jack Thor Tuesday, March 20, 2018 11:26 PM
    Tuesday, March 20, 2018 11:02 PM

Answers

  • Are you asking if you are required to set the Callback and errorCallback when you are using the v8 Autosuggest module? 

    If that is the case, you are not required to.  If you run the following code on the v8 ISDK:

    https://www.bing.com/maps/sdkrelease/mapcontrol/isdk/autosuggestuiwithoutmap

    Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', 
    function() {
        var options = { maxResults: 5 };
        var manager = new Microsoft.Maps.AutosuggestManager(options);
        manager.attachAutosuggest('#searchBox', '#searchBoxContainer', selectedSuggestion);
    });
    
    function selectedSuggestion(suggestionResult) {
        document.getElementById('printoutPanel').innerHTML =
            'Suggestion: ' + suggestionResult.formattedSuggestion +
                '<br> Lat: ' + suggestionResult.location.latitude +
                '<br> Lon: ' + suggestionResult.location.longitude;
    }

    It runs without issue. 

    If your question was pertaining to some other portion of your code, please let us know.

    Wednesday, March 21, 2018 12:33 AM
    Moderator
  • I must be doing something wrong then. Here is my complete code that does not work if map is null

     bingMaps.createAutoSuggestion = function ($autoComplete, $suggestionContainer, map) {
            var options = {
                maxResults: 5
            };
            var $resultContainer = $suggestionContainer;
    
            $autoComplete.addClass("k-textbox");
    
            /*
             * The Bing map auto suggest module needs us to pass in the Id of the container of where the suggestion will be displayed.
             * If none was passed, we wrap the auto suggest with a known span to use as the container since we do not know if the auto suggest's container contian an Id
             */
            if (!exists($suggestionContainer)) {
                $autoComplete.wrap("<span id='autoSuggestContainer'></span>");
                $resultContainer = $autoComplete.parent();
            }
    
            if (!isNullOrEmpty(map)) {
                options.map = map;
            } 
                Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function () {
                    var manager = new Microsoft.Maps.AutosuggestManager(options);
                    manager.attachAutosuggest('#' + $autoComplete.attr("id"), '#' + $resultContainer.attr("id"), bingMaps.UpdateAddressAndMap);
                });
      
        };

    The below code works by adding the else if statement so that we load the auto suggest differently.

     bingMaps.createAutoSuggestion = function ($autoComplete, $suggestionContainer, map) {
            var options = {
                maxResults: 5
            };
            var $resultContainer = $suggestionContainer;
    
            $autoComplete.addClass("k-textbox");
    
            /*
             * The Bing map auto suggest module needs us to pass in the Id of the container of where the suggestion will be displayed.
             * If none was passed, we wrap the auto suggest with a known span to use as the container since we do not know if the auto suggest's container contian an Id
             */
            if (!exactbid.rims.common.exists($suggestionContainer)) {
                $autoComplete.wrap("<span id='autoSuggestContainer'></span>");
                $resultContainer = $autoComplete.parent();
            }
    
            if (!exactbid.rims.common.isNullOrEmpty(map) ) {
                 Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
                        callback: function () {
                            var manager = new Microsoft.Maps.AutosuggestManager(options);
                            manager.attachAutosuggest('#' + $autoComplete.attr("id"), '#' + $resultContainer.attr("id"), bingMaps.UpdateAddressAndMap);
                        },
                        error: function (e) {
                            logJavascriptError(e,
                                "bingmap.js",
                                178,
                                0,
                                e);
                        }
                });
            } else {
                options.map = map;
                Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function () {
                    var manager = new Microsoft.Maps.AutosuggestManager(options);
                    manager.attachAutosuggest('#' + $autoComplete.attr("id"), '#' + $resultContainer.attr("id"), bingMaps.UpdateAddressAndMap);
                });
            }
        };


    • Edited by Jack Thor Wednesday, March 21, 2018 12:54 AM
    • Marked as answer by Ricky_Brundritt Friday, April 6, 2018 1:03 AM
    Wednesday, March 21, 2018 12:53 AM
  • I also updated the code to the one below and it did not work. All I did was commented the code that has a callback and replaced it with the function

    bingMaps.createAutoSuggestion = function ($autoComplete, $suggestionContainer, map) {
            var options = {
                maxResults: 5
            };
            var $resultContainer = $suggestionContainer;
    
            $autoComplete.addClass("k-textbox");
    
            /*
             * The Bing map auto suggest module needs us to pass in the Id of the container of where the suggestion will be displayed.
             * If none was passed, we wrap the auto suggest with a known span to use as the container since we do not know if the auto suggest's container contian an Id
             */
            if (!exactbid.rims.common.exists($suggestionContainer)) {
                $autoComplete.wrap("<span id='autoSuggestContainer'></span>");
                $resultContainer = $autoComplete.parent();
            }
    
            if (!exactbid.rims.common.isNullOrEmpty(map) ) {
                  Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function () {
                    var manager = new Microsoft.Maps.AutosuggestManager(options);
                    manager.attachAutosuggest('#' + $autoComplete.attr("id"), '#' + $resultContainer.attr("id"), bingMaps.UpdateAddressAndMap);
                });
                // Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
                //        callback: function () {
                //            var manager = new Microsoft.Maps.AutosuggestManager(options);
                //            manager.attachAutosuggest('#' + $autoComplete.attr("id"), '#' + $resultContainer.attr("id"), bingMaps.UpdateAddressAndMap);
                //        },
                //        error: function (e) {
                //            exactbid.rims.logging.logJavascriptError(e,
                //                "exactbid.rims.bingmap.js",
                //                178,
                //                0,
                //                e);
                //        }
                //});
            } else {
                options.map = map;
                Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function () {
                    var manager = new Microsoft.Maps.AutosuggestManager(options);
                    manager.attachAutosuggest('#' + $autoComplete.attr("id"), '#' + $resultContainer.attr("id"), bingMaps.UpdateAddressAndMap);
                });
            }
        };

    Wednesday, March 21, 2018 1:13 AM
  • This worked to. Looks like for some reason when we do not use the call back it causes weird unexpected functionality.

    bingMaps.createAutoSuggestion = function ($autoComplete, $suggestionContainer, map) {
            var options = {
                maxResults: 5
            };
            var $resultContainer = $suggestionContainer;
    
            $autoComplete.addClass("k-textbox");
    
            /*
             * The Bing map auto suggest module needs us to pass in the Id of the container of where the suggestion will be displayed.
             * If none was passed, we wrap the auto suggest with a known span to use as the container since we do not know if the auto suggest's container contian an Id
             */
            if (!exactbid.rims.common.exists($suggestionContainer)) {
                $autoComplete.wrap("<span id='autoSuggestContainer'></span>");
                $resultContainer = $autoComplete.parent();
            }
    
            if (!exactbid.rims.common.isNullOrEmpty(map)) {
                options.map = map;
            } 
                Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
                    callback: function () {
                        var manager = new Microsoft.Maps.AutosuggestManager(options);
                        manager.attachAutosuggest('#' + $autoComplete.attr("id"), '#' + $resultContainer.attr("id"), bingMaps.UpdateAddressAndMap);
                    },
                    error: function (e) {
                        exactbid.rims.logging.logJavascriptError(e,
                            "bingmap.js",
                            178,
                            0,
                            e);
                    }
                });
        };

    Wednesday, March 21, 2018 1:29 AM

All replies

  • Are you asking if you are required to set the Callback and errorCallback when you are using the v8 Autosuggest module? 

    If that is the case, you are not required to.  If you run the following code on the v8 ISDK:

    https://www.bing.com/maps/sdkrelease/mapcontrol/isdk/autosuggestuiwithoutmap

    Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', 
    function() {
        var options = { maxResults: 5 };
        var manager = new Microsoft.Maps.AutosuggestManager(options);
        manager.attachAutosuggest('#searchBox', '#searchBoxContainer', selectedSuggestion);
    });
    
    function selectedSuggestion(suggestionResult) {
        document.getElementById('printoutPanel').innerHTML =
            'Suggestion: ' + suggestionResult.formattedSuggestion +
                '<br> Lat: ' + suggestionResult.location.latitude +
                '<br> Lon: ' + suggestionResult.location.longitude;
    }

    It runs without issue. 

    If your question was pertaining to some other portion of your code, please let us know.

    Wednesday, March 21, 2018 12:33 AM
    Moderator
  • I must be doing something wrong then. Here is my complete code that does not work if map is null

     bingMaps.createAutoSuggestion = function ($autoComplete, $suggestionContainer, map) {
            var options = {
                maxResults: 5
            };
            var $resultContainer = $suggestionContainer;
    
            $autoComplete.addClass("k-textbox");
    
            /*
             * The Bing map auto suggest module needs us to pass in the Id of the container of where the suggestion will be displayed.
             * If none was passed, we wrap the auto suggest with a known span to use as the container since we do not know if the auto suggest's container contian an Id
             */
            if (!exists($suggestionContainer)) {
                $autoComplete.wrap("<span id='autoSuggestContainer'></span>");
                $resultContainer = $autoComplete.parent();
            }
    
            if (!isNullOrEmpty(map)) {
                options.map = map;
            } 
                Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function () {
                    var manager = new Microsoft.Maps.AutosuggestManager(options);
                    manager.attachAutosuggest('#' + $autoComplete.attr("id"), '#' + $resultContainer.attr("id"), bingMaps.UpdateAddressAndMap);
                });
      
        };

    The below code works by adding the else if statement so that we load the auto suggest differently.

     bingMaps.createAutoSuggestion = function ($autoComplete, $suggestionContainer, map) {
            var options = {
                maxResults: 5
            };
            var $resultContainer = $suggestionContainer;
    
            $autoComplete.addClass("k-textbox");
    
            /*
             * The Bing map auto suggest module needs us to pass in the Id of the container of where the suggestion will be displayed.
             * If none was passed, we wrap the auto suggest with a known span to use as the container since we do not know if the auto suggest's container contian an Id
             */
            if (!exactbid.rims.common.exists($suggestionContainer)) {
                $autoComplete.wrap("<span id='autoSuggestContainer'></span>");
                $resultContainer = $autoComplete.parent();
            }
    
            if (!exactbid.rims.common.isNullOrEmpty(map) ) {
                 Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
                        callback: function () {
                            var manager = new Microsoft.Maps.AutosuggestManager(options);
                            manager.attachAutosuggest('#' + $autoComplete.attr("id"), '#' + $resultContainer.attr("id"), bingMaps.UpdateAddressAndMap);
                        },
                        error: function (e) {
                            logJavascriptError(e,
                                "bingmap.js",
                                178,
                                0,
                                e);
                        }
                });
            } else {
                options.map = map;
                Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function () {
                    var manager = new Microsoft.Maps.AutosuggestManager(options);
                    manager.attachAutosuggest('#' + $autoComplete.attr("id"), '#' + $resultContainer.attr("id"), bingMaps.UpdateAddressAndMap);
                });
            }
        };


    • Edited by Jack Thor Wednesday, March 21, 2018 12:54 AM
    • Marked as answer by Ricky_Brundritt Friday, April 6, 2018 1:03 AM
    Wednesday, March 21, 2018 12:53 AM
  • I also updated the code to the one below and it did not work. All I did was commented the code that has a callback and replaced it with the function

    bingMaps.createAutoSuggestion = function ($autoComplete, $suggestionContainer, map) {
            var options = {
                maxResults: 5
            };
            var $resultContainer = $suggestionContainer;
    
            $autoComplete.addClass("k-textbox");
    
            /*
             * The Bing map auto suggest module needs us to pass in the Id of the container of where the suggestion will be displayed.
             * If none was passed, we wrap the auto suggest with a known span to use as the container since we do not know if the auto suggest's container contian an Id
             */
            if (!exactbid.rims.common.exists($suggestionContainer)) {
                $autoComplete.wrap("<span id='autoSuggestContainer'></span>");
                $resultContainer = $autoComplete.parent();
            }
    
            if (!exactbid.rims.common.isNullOrEmpty(map) ) {
                  Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function () {
                    var manager = new Microsoft.Maps.AutosuggestManager(options);
                    manager.attachAutosuggest('#' + $autoComplete.attr("id"), '#' + $resultContainer.attr("id"), bingMaps.UpdateAddressAndMap);
                });
                // Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
                //        callback: function () {
                //            var manager = new Microsoft.Maps.AutosuggestManager(options);
                //            manager.attachAutosuggest('#' + $autoComplete.attr("id"), '#' + $resultContainer.attr("id"), bingMaps.UpdateAddressAndMap);
                //        },
                //        error: function (e) {
                //            exactbid.rims.logging.logJavascriptError(e,
                //                "exactbid.rims.bingmap.js",
                //                178,
                //                0,
                //                e);
                //        }
                //});
            } else {
                options.map = map;
                Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function () {
                    var manager = new Microsoft.Maps.AutosuggestManager(options);
                    manager.attachAutosuggest('#' + $autoComplete.attr("id"), '#' + $resultContainer.attr("id"), bingMaps.UpdateAddressAndMap);
                });
            }
        };

    Wednesday, March 21, 2018 1:13 AM
  • This worked to. Looks like for some reason when we do not use the call back it causes weird unexpected functionality.

    bingMaps.createAutoSuggestion = function ($autoComplete, $suggestionContainer, map) {
            var options = {
                maxResults: 5
            };
            var $resultContainer = $suggestionContainer;
    
            $autoComplete.addClass("k-textbox");
    
            /*
             * The Bing map auto suggest module needs us to pass in the Id of the container of where the suggestion will be displayed.
             * If none was passed, we wrap the auto suggest with a known span to use as the container since we do not know if the auto suggest's container contian an Id
             */
            if (!exactbid.rims.common.exists($suggestionContainer)) {
                $autoComplete.wrap("<span id='autoSuggestContainer'></span>");
                $resultContainer = $autoComplete.parent();
            }
    
            if (!exactbid.rims.common.isNullOrEmpty(map)) {
                options.map = map;
            } 
                Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
                    callback: function () {
                        var manager = new Microsoft.Maps.AutosuggestManager(options);
                        manager.attachAutosuggest('#' + $autoComplete.attr("id"), '#' + $resultContainer.attr("id"), bingMaps.UpdateAddressAndMap);
                    },
                    error: function (e) {
                        exactbid.rims.logging.logJavascriptError(e,
                            "bingmap.js",
                            178,
                            0,
                            e);
                    }
                });
        };

    Wednesday, March 21, 2018 1:29 AM