none
Autosuggest module "injecting" code into your control RRS feed

  • Question

  • Hello,

    I am implementing a search box, that is using this example here

    http://www.bing.com/api/maps/sdk/mapcontrol/isdk#autoSuggestUi+JS

    Its necessary to attach the container and your input field. So far so good. My issues comes with the code injection that is made in your control(the input one) with :

    style="background-color: transparent;"

    and

    style="background-color: rgb(255,255,255);"

    is there anyway to turn off this behaviour? cause i dont want code being injected in my control/code

    Best regards

    João Mourão

    Tuesday, October 25, 2016 10:45 AM

Answers

  • That's odd. This doesn't happen until you have selected a suggestion. I haven't seen that before and not sure if it is the map control or not that is doing this. Will have the team investigate.

    [Blog] [twitter] [LinkedIn]


    • Edited by Ricky_Brundritt Wednesday, October 26, 2016 5:03 PM
    • Marked as answer by JMRMourao Monday, October 31, 2016 2:26 PM
    Wednesday, October 26, 2016 5:00 PM
  • Good news, this has now been fixed in the experimental branch and will be added to the main release branch in the next update planned within the next month or so.

    [Blog] [twitter] [LinkedIn]

    Monday, July 17, 2017 8:03 PM

All replies

  • In order for Autosuggest to work it needs to inject HTML to display the suggestions. It doesn't change the rendering of the input box, only the suggestion container which is meant to do. This is by design and how other autosuggest modules work.

    Not, if you don't won't code injected into your application, then you would need to remove most JavaScript frameworks from your application. The map control it self adds a bunch of HTML to the page. If it didn't there would be nothing to render/display. This is how web apps work.


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Tuesday, October 25, 2016 6:13 PM
    • Unproposed as answer by JMRMourao Friday, October 28, 2016 10:51 AM
    Tuesday, October 25, 2016 6:13 PM
  • Hello,

    Just a small experiment, this is the HTML from the link above, i just changed the body "background-color" attribute to blue to make it more clear. You have the input box and the map, everything fine. If something is written in the text box and then you do any action outside, you see the input box changes to transparent and not only the autosuggest container

    <!DOCTYPE html>
    <html>
        <head>
            <title>autoSuggestUiHTML</title>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        </head>
        <body style="background-color:Blue">
            <div id='printoutPanel'></div>
            <div id='searchBoxContainer'><input type= 'text' id= 'searchBox'/></div>
            
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
            <script type='text/javascript'>
                function loadMapScenario() {
                    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                        credentials: 'Your Bing Maps Key',
                        center: new Microsoft.Maps.Location(47.606209, -122.332071),
                        zoom: 12
                    });
                    Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function () {
                        var options = {
                            maxResults: 4,
                            map: map
                        };
                        var manager = new Microsoft.Maps.AutosuggestManager(options);
                        manager.attachAutosuggest('#searchBox', '#searchBoxContainer', selectedSuggestion);
                    });
                    function selectedSuggestion(suggestionResult) {
                        map.entities.clear();
                        map.setView({ bounds: suggestionResult.bestView });
                        var pushpin = new Microsoft.Maps.Pushpin(suggestionResult.location);
                        map.entities.push(pushpin);
                        document.getElementById('printoutPanel').innerHTML =
                            'Suggestion: ' + suggestionResult.formattedSuggestion +
                                '<br> Lat: ' + suggestionResult.location.latitude +
                                '<br> Lon: ' + suggestionResult.location.longitude;
                    }
    
                }
            </script>
            <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>
        </body>
    </html>

    Best Regards

    João Mourão

    Wednesday, October 26, 2016 10:28 AM
  • That's odd. This doesn't happen until you have selected a suggestion. I haven't seen that before and not sure if it is the map control or not that is doing this. Will have the team investigate.

    [Blog] [twitter] [LinkedIn]


    • Edited by Ricky_Brundritt Wednesday, October 26, 2016 5:03 PM
    • Marked as answer by JMRMourao Monday, October 31, 2016 2:26 PM
    Wednesday, October 26, 2016 5:00 PM
  • Ricky what is the status of this? I am noting this same behavior still today.
    Wednesday, July 5, 2017 6:23 PM
  • The team plans on modifying this, but  hasn't gotten to this yet as they are focused on issues that are blocking others from migrating from V7 to V8. Since autosuggest is a new feature it is not considered a migration blocker. 

    [Blog] [twitter] [LinkedIn]

    Wednesday, July 5, 2017 7:40 PM
  • Good news, this has now been fixed in the experimental branch and will be added to the main release branch in the next update planned within the next month or so.

    [Blog] [twitter] [LinkedIn]

    Monday, July 17, 2017 8:03 PM