How can I change the direction/location of the autosuggestion results?

Justin Evans 1 Reputation point
2022-11-23T10:24:34.5+00:00

Hi there,

I've included the bing maps autosuggestion module in my website, which works perfectly. However, when the suggestion drop down box expands it goes down. I need to make it go up as the search bar itself is on the bottom of the page already.

I had a good browse for any options I could set but did not find any. I suspect that I will need to add CSS to redirect this but I am not sure what class/id i would be manipulating as neither #searchBox or #searchBoxContainer had the desired results.

Thankyou in advance, any help is appreciated!

~Justin

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
661 questions
{count} votes

1 answer

Sort by: Most helpful
  1. rbrundritt 16,466 Reputation points Microsoft Employee
    2022-11-23T17:25:21.97+00:00

    Doing some testing I found that I could achieve this using the following CSS:

       .as_container_search {  
       	transform: translateY(calc(-100% - 20px));  
       }  
    

    Note that this is modifying an internal CSS class of Bing Maps. The 20px may need to be adjusted to account for the height of your search box.

    Here is a fully working sample:

       <!DOCTYPE html>  
       <html lang="en">  
       <head>  
           <title></title>  
         
           <meta charset="utf-8" />  
           <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />  
             
           <script>  
           var map;  
         
           function GetMap() {  
               map = new Microsoft.Maps.Map('#myMap', {});  
         
               Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function () {  
                   var manager = new Microsoft.Maps.AutosuggestManager({ map: map });  
                   manager.attachAutosuggest('#searchBox', '#searchBoxContainer', suggestionSelected);  
               });  
           }  
         
           function suggestionSelected(result) {  
               //Remove previously selected suggestions from the map.  
               map.entities.clear();  
         
               //Show the suggestion as a pushpin and center map over it.  
               var pin = new Microsoft.Maps.Pushpin(result.location);  
               map.entities.push(pin);  
         
               map.setView({ bounds: result.bestView });  
           }  
           </script>  
           <style>  
       	.as_container_search {  
       		transform: translateY(calc(-100% - 20px));  
       	}  
       	</style>  
       </head>  
       <body>  
         
           <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;background-color:gray"></div>  
         
            
           <div id='searchBoxContainer'>  
               <input type='text' id='searchBox' />  
           </div>  
       	  
       	<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=<Your_Bing_Maps_Key>' async defer></script>  
       </body>  
       </html>  
    
    0 comments No comments