Post
Ask Question

Getting Started With Bing AutoSugesstion API On The Azure Portal

This article demonstrates how to create Bing Autosuggestion on the Azure portal and implement the Bing Autosuggestion on our Local machine and view the result in the search engine.
 
What are Cognitive Services?
 
Microsoft Cognitive Services is a group of APIs, SDKs, and services that are available for the developers to develop more intelligent, engaging, and discoverable applications. It enables the developers to quickly add intelligent features like emotion, video detection, face, speech, and visual recognition in our applications.
 
Bing Autosuggestion
 
In browsers, we search for things using keywords. Then, the browser works fine and shows the autosuggestion list to match the keyword and then the autosuggestion API improves our search box experience. The Bing Autosuggestion API returns the list of suggested queries based on the query string the user enters in the search box. Display the suggestions in the drop-down menu. Behind the scenes, we don't know what happens; this API allows to create the Searching option on our applications.
 
 
 
In the Bing Autosuggestion, the search action shows the query like,
  1. {  
  2.           "url": "https://www.bing.com/search?q=azure+portal&FORM=USBAPI                    "displayText": "azure portal",  
  3.           "query": "azure portal",  
  4.           "searchKind": "WebSearch"  
  5.         }, 
 The search action that defines a query search suggestion,
  • url--- It takes the user to the Bing search results page for the suggested query.
  • displayText--- The suggested query term to display in a UI.
  • Query--- The Suggested query Term.
  • SearchKind--- The type of Suggestion.

    • custom search
      Custom Search is a suggestion from a non-web search suggestion data source.

    • web search. 
      WebSearch is a suggestion from a web a web-search data source.
Let's start to create the Bing AutoSuggestion API.
 
Step 1
 
Sign in to the Azure Portal.
 
Step 2
 
In the Azure Portal, press "+New" and search for the "Bing AutoSuggestion v7 API" and click it.

 
Step 3
 
Then read and accept the "Terms & conditions" and press "Create."

 
 
Step 4
 
In the "Create" blade, enter the name of your API and choose your subscription. For Pricing Tier, accept the default one and press "Select."

 
 
Step 5
 
Then, enter the name of your resource group, and also choose the location. Then, accept the conditions to allow Microsoft to use our data. Press "Create."

 
 
Step 6
 
After the successful deployment, our API properties page opens. Press "Keys" to open your keys and press copy button to paste it to our clipboard.
 
 
 
Step 7
 
Now, we are going to build the webpage that allows the user to query the Bing AutoSuggestion API. Copy and paste the code into the Notepad or in any HTML Text Editors. Save it with .html extension.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">   
  5.     <title>Bing Autosuggest</title>  
  6.   
  7. <style type="text/css">  
  8.     html, body, div, p, h1, h2 {font-family: Verdana, "Lucida Sans", sans-serif;}  
  9.   
  10.     html, body, div, p  {font-weight: normal;}  
  11.     h1, h2 {font-weight: bold;}  
  12.     sup {font-weight: normal;}  
  13.   
  14.     html, body, div, p  {font-size: 12px;}  
  15.     h1 {font-size: 20px;}  
  16.     h2 {font-size: 16px;}  
  17.     h1, h2 {clear: left;}  
  18.   
  19.     img#logo {float: right;  
  20. </style>  
  21.   
  22. <script type="text/javascript">  
  23.   
  24. getSubscriptionKey = function() {  
  25.   
  26.     var COOKIE = "Enter your subscription key";   // name used to store API key in key/value storage  
  27.   
  28.     function findCookie(name) {  
  29.         var cookies = document.cookie.split(";");  
  30.         for (var i = 0; i < cookies.length; i++) {  
  31.             var keyvalue = cookies[i].split("=");  
  32.             if (keyvalue[0].trim() === name) {  
  33.                 return keyvalue[1];  
  34.             }  
  35.         }  
  36.         return "";  
  37.         }  
  38.   
  39.     function getSubscriptionKeyCookie() {  
  40.         var key = findCookie(COOKIE);  
  41.         while (key.length !== 32) {  
  42.             key = prompt("Enter Bing Autosuggest API subscription key:", "").trim();  
  43.             var expiry = new Date();  
  44.             expiry.setFullYear(expiry.getFullYear() + 2);  
  45.             document.cookie = COOKIE + "=" + key.trim() + "; expires=" + expiry.toUTCString();  
  46.         }  
  47.         return key;  
  48.     }  
  49.   
  50.     function getSubscriptionKeyLocalStorage() {  
  51.         var key = localStorage.getItem(COOKIE) || "";  
  52.         while (key.length !== 32)  
  53.             key = prompt("Enter Bing Autosuggest API subscription key:", "").trim();  
  54.         localStorage.setItem(COOKIE, key)  
  55.         return key;  
  56.     }  
  57.   
  58.     function getSubscriptionKey(invalidate) {  
  59.         if (invalidate) {  
  60.             try {  
  61.                 localStorage.removeItem(COOKIE);  
  62.             } catch (e) {  
  63.                 document.cookie = COOKIE + "=";  
  64.             }  
  65.         } else {  
  66.             try {  
  67.                 return getSubscriptionKeyLocalStorage();  
  68.             } catch (e) {  
  69.                 return getSubscriptionKeyCookie();  
  70.             }  
  71.         }  
  72.     }  
  73.   
  74.     return getSubscriptionKey;  
  75.   
  76. }();  
  77.   
  78. function pre(text) {  
  79.     return "<pre>" + text.replace(/&/g, "&").replace(/</g, "<") + "</pre>"  
  80. }  
  81.   
  82. function renderSearchResults(results) {  
  83.     document.getElementById("results").innerHTML = pre(JSON.stringify(results, null, 2));  
  84. }  
  85.   
  86. function renderErrorMessage(message, code) {  
  87.     if (code)  
  88.         document.getElementById("results").innerHTML = "<pre>Status " + code + ": " + message + "</pre>";  
  89.     else  
  90.         document.getElementById("results").innerHTML = "<pre>" + message + "</pre>";  
  91. }  
  92.   
  93. function bingAutosuggest(query, key) {  
  94.     var endpoint = "https://api.cognitive.microsoft.com/bing/v7.0/Suggestions";  
  95.   
  96.     var request = new XMLHttpRequest();  
  97.   
  98.     try {  
  99.         request.open("GET", endpoint + "?q=" + encodeURIComponent(query));  
  100.     }   
  101.     catch (e) {  
  102.         renderErrorMessage("Bad request");  
  103.         return false;  
  104.     }  
  105.   
  106.     request.setRequestHeader("Ocp-Apim-Subscription-Key", key);  
  107.   
  108.     request.addEventListener("load", function() {  
  109.         if (this.status === 200) {  
  110.             renderSearchResults(JSON.parse(this.responseText));  
  111.         }  
  112.         else {  
  113.             if (this.status === 401) getSubscriptionKey(true);  
  114.             renderErrorMessage(this.statusText, this.status);  
  115.         }  
  116.     });  
  117.   
  118.     request.addEventListener("error", function() {  
  119.         renderErrorMessage("Network error");  
  120.     });  
  121.   
  122.     request.addEventListener("abort", function() {  
  123.         renderErrorMessage("Request aborted");  
  124.     });  
  125.   
  126.     request.send();  
  127.     return false;  
  128. }  
  129. // --></script>  
  130.   
  131. </head>  
  132.   
  133. <body onload="document.forms.bing.query.focus(); getSubscriptionKey();">  
  134.   
  135. <img id="logo" align=base src="data:image/png;base64,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">  
  136.   
  137. <form name="bing" oninput="return bingAutosuggest(this.query.value, getSubscriptionKey())">  
  138.     <h2>Autosuggest</h2>  
  139.     <input type="text" name="query" size="80" placeholder="Autosuggest" autocomplete=off>  
  140. </form>  
  141.   
  142. <h2>Results</h2>  
  143. <div id="results">  
  144. <p>None yet.</p>  
  145.   
  146. </div>  
  147.   
  148. </body>  
  149. </html>  
On the 26th line of your code, you want to paste your subscription key to allow the webpage to access the Bing AutoSuggestion API.
 
Step 8
 
Open the HTML page and it pops up with the menu that asks for the subscription key. Paste it and press "OK".

 
 
The normal webpage looks like this. In the search field, search for query that we want.

 
It shows the output in the query format that I mentioned at the starting of this article.

 
 
Summary
 
I hope you understood what Bing Autosuggestion and Autosuggestion API are. In the AutoSuggestion webpage demonstration, I showed how to implement the Bing Autosuggestion API.


Similar Articles