Attach Autosuggest UI(Without Map) on dynamically append element

AHSAN ALI 81 Reputation points
2023-11-30T20:19:59.13+00:00 
        var manager;
        function loadMapScenario() {
            Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
                callback: onLoad,
                errorCallback: onError
            });
            function onLoad() {
                var options = {
                    maxResults: 10 
};
                manager = new Microsoft.Maps.AutosuggestManager(options);
                manager.attachAutosuggest('#PickUpAddress', '#PickUpAddressCon', selectedSuggestion);
            }
            function onError(message) {
                document.getElementById('printoutPanel').innerHTML = message;
            }
            function selectedSuggestion(suggestionResult) {
                console.log(suggestionResult)
                //document.getElementById('printoutPanel').innerHTML =
                //    'Suggestion: ' + suggestionResult.formattedSuggestion +
                //    '<br> Lat: ' + suggestionResult.location.latitude +
                //    '<br> Lon: ' + suggestionResult.location.longitude;
            }

        }

i followed this

https://www.bing.com/api/maps/sdk/mapcontrol/isdk/autosuggestuiwithoutmap

how can i attach this on dynamicaly append textbox and suggest only UK address

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
595 questions
Windows Maps
Windows Maps
A Microsoft app that provides voice navigation and turn-by-turn driving, transit, and walking directions.
245 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. LeelaRajeshSayana-MSFT 13,471 Reputation points
    2023-12-02T03:12:23.9633333+00:00

    Hi @AHSAN ALI Thank you for posting the question here. The Bing Maps auto suggestion API accepts a countryfilter as query parameter when making the call. You can append this to your query so that the returned results would be generated based on Country you have set. Please refer to the API Query parameters section for more details on this.

    If you plan to use the Auto Suggestion independently from the Map, you can create a simple text box on the UI and pass the search query typed in the text box to below API to get the results directly.

    http://dev.virtualearth.net/REST/v1/Autosuggest?query=<user_prefix>&userLocation=<lat,long,confidence_radius>&userCircularMapView=<lat,long,radius>&userMapView=<nw_lat,nw_long,se_lat,se_long>&maxResults=<max_results>&includeEntityTypes=<Place,Address,Business>&culture=<culture_code>&userRegion=<country_code>&countryFilter=<country_code_or_none>&key=<BingMapKey>

    Here is a sample HTML code which calls the API and captures the matching results.

    <!DOCTYPE html>
<html>
<head>
    <title>Autosuggest API Example</title>
</head>
<body>
    <input type="text" id="inputValue" placeholder="Enter search query">
    <button onclick="search()">Search</button>
    <ul id="results"></ul>
<script>
		function search() {            
			var inputValue = document.getElementById("inputValue").value;            
			var url = "http://dev.virtualearth.net/REST/v1/Autosuggest?query="+inputValue+"&userLocation=47.668697,-122.376373,5&cf=us&includeEntityTypes=Business&key=<Bing Maps Key>"            
				.then(response => response.json())                
				.then(data => {
					var results = document.getElementById("results");                    						                              results.innerHTML = "";

                    data.resourceSets[0].resources[0].value.forEach(resource => {
                        var li = document.createElement("li");
                        li.textContent = resource.name;
                        results.appendChild(li);
                    });
                })
                .catch(error => console.error(error));
        }
</script>
</body>
</html>

    Please make sure to replace the Bing Maps key in the above URL. Here is the result I get from the HTML page after searching from the text box.

    enter image description here

    Hope this helps. Please let us know if you have any additional questions on this or need further assistance.

    If the response helped, please do click Accept Answer and Yes for the answer provided. Doing so would help other community members with similar issue identify the solution. I highly appreciate your contribution to the community.

    1 person found this answer helpful.