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

Justin Evans 1

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

LeelaRajeshSayana-MSFT 13,456 Reputation points

2022-12-07T00:03:54.973+00:00

Hi @Justin Evans , Greetings! I am following up to check if the response below has helped you with addressing the issue.

----------

Kindly accept answer or upvote if the response is helpful so that it would benefit other community members facing the same issue. I highly appreciate your contribution to the community.

1 answer

rbrundritt 15,231 Microsoft Employee

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>