Microsoft Cognitive Services Bing Search Example

Well, here we will discuss an excellent example of the implementation of Microsoft Cognitive Services Bing Search. Before starting the actual development activity we should discuss a couple of stuff here.

Bing Search API Tutorial

So we will discuss What is Microsoft Cognitive Services? , What Microsoft Cognitive Services Bing Search?.

What is Microsoft Cognitive services?

Microsoft Azure Cognitive services are excellent services from Microsoft that provide a number of Azure APIs that help you with the ability to make it easy to enhance your applications in different areas like vision, speech, knowledge, search and language, etc. That provides you the ability to implement the AI features in these areas. Find out more information on Azure Cognitive Services now.

What is Cognitive Services Bing Search?

Azure Cognitive Services Bing Search API is one of the excellent services from Microsoft that actually helps you to implement an Intelligent search in your application. We know that search is an important feature that helps the users to find out all the information for your APP immediately. This Search API helps you to implement the search capability that can get web search results from billions of Webpages, Images, Videos and News, etc.

This service helps you to implement the Search functionality with the help of an API call. Less coding effort required that saves a lot of time and effort for a Developer prospective.

Few key benefits of the Azure Cognitive Services Bing Search API is as below

You can get an instant answer for your search relevant to Bing answers, images, Videos, Calculators, etc.
Provides an excellent opportunity to rank your result and answer quickly that fits your layout.
It provides a very powerful algorithm and statistics for your search queries.
Provides you with the Spelling suggestions feature and the related searches feature.
Most importantly, it provides you a safe search capability which is much needed for you.

Now we got a little bit idea of the Azure Cognitive Services Bing Search API. Now let’s discuss the Prerequisites needed here to implement the Azure Cognitive Services Bing Search API.

As part of this Microsoft Cognitive Services Bing Search Example, we will perform the below activities

Create Azure Cognitive Services Bing Search API in Azure Portal
Create An ASP.NET Web Application Using Visual Studio 2019 and We will use the Bing Search API key.

Prerequisites

Below are the Prerequisites needed here to implement the Azure Cognitive Services Bing Search API as part of this example.

You must have a valid Azure subscription or a valid Azure Account. If you don’t have an Azure Account till now, you can Create a Free Azure Account now.
You will have to install Visual Studio 2019 on your development machine. If you haven’t installed Visual Studio 2019 yet. Download and Install the Visual Studio 2019 on your dev machine now.

Now assuming that you are ready with all the Prerequisites, let’s start the actual development here. The first step will be, we need to Create Azure Cognitive Services Bing Search API in Azure Portal.

Create Azure Cognitive Services Bing Search API in Azure Portal

Follow the below steps to Create Azure Cognitive Services Bing Search API in Azure Portal.

Bing Search API Example

Once, you logged in to the Azure Portal, search for the Bing Search and click on the search result Bing Search under the Marketplace as highlighted below.

Create Azure Cognitive Services Bing Search API in Azure Portal — bing search api free

Or, for the same option, you can click on the + Create a Resource button from the left navigation and then on the New window, search for the Bing Search and click on the search result Bing Search as highlighted below

Create Azure Cognitive Services Bing Search API

Now click on the Create button on the next window as highlighted below

Create Azure Cognitive Services Bing Search API Azure Portal — bing search api example

On the Create window, Provide the below details as shown below

Name: Provide a unique name for the Azure Cognitive Services Bing Search API.
Subscription: Choose a valid subscription that you want to use to create the Azure Cognitive Services Bing Search API.
Pricing tier: You can choose the pricing tier based on your requirement. For the Demo purpose, you can choose the Free F1 pricing tier that will provide 3 calls per second and 1k calls per month. You can click on the View full pricing details link to know more about the pricing structure.
Resource Group: You can select the Existing Resource group or you can click on the Create new link to create a new Resource Group.
Read the notice properly and accept the same by selecting the checkbox as shown below.

Finally click on the Create button Create Azure Cognitive Services Bing Search API.

Create Azure Cognitive Services Bing Search API using Azure Portal

You can able to see the deployment is completed successfully without any issue. Click on the Go to resource button to navigate to the Azure Cognitive Services Bing Search API that we have created now.

How to create Create Azure Cognitive Services Bing Search API

Below is the Azure Cognitive Services Bing Search API that we have created just now.

Now the next step is to copy the key value of the Azure Cognitive Services Bing Search API. To copy the key value, click on the Keys and Endpoint link from the left navigation. Now you can able to see the key1 and key2 value on the right side. Click the Show keys button to see the key values. Click on the copy button next to the Key1 value and then keep that key value in a notepad as we are going to use this key value in our next steps.

You can also click on the Regenerate key1 or Regenerate Key2 button to generate a new value for the key1 or key2 if you want to use a new key-value instead of the old one.

Create Microsoft Bing Search API Azure Portal

Now, we are done with the steps to Create Azure Cognitive Services Bing Search API in Azure Portal. The next step is to create a windows application and we will consume the Azure Cognitive Services Bing Search API that we have created above.

Create An ASP.NET Web Application Using Visual Studio 2019

Follow the below steps to create an ASP.NET Web Application in Visual Studio 2019.

Open the Visual Studio 2019 and click on the Create a new project button on the getting started window.

The next step is to select the Project template. Select ASP.NET Web Application (.NET Framework) as the project template and then click on the Next button.

Microsoft Cognitive Services Bing Search Example

On the Configure your new project window, Provide the name for the project, Choose a location as a local path in your machine to save the project, and then choose the latest .NET Framework version and then finally click on the Create button.

On the Create a new ASP.NET Web Application window, select the Empty Project and then click on the Create button.

Microsoft bing search api javascript example

Now you can able to see the Project got created successfully with out any issue as shown below.

Bing Search API JavaScript Example

Now the time to add the required code to implement the Azure Cognitive Services Bing Search API. Let’s add the required code.

First Add the BingSearch.aspx file. Right click on the Project —> Add New File —> Enter the name as BingSearch.aspx and click on the Add button.

Now add the below code in the BingSearch.aspx file as shown below

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BingSearch.aspx.cs" Inherits="DemoWebBingSearch.BingSearch" %>

<!DOCTYPE html>

<html xmlns="https://www.w3.org/1999/xhtml"> 
<head runat="server">

    <title>Azure Cognitive Services Bing Search API</title>
    <style>
        .ulSearch {
            text-align: left;
            font-family: Arial;
        }

            .ulSearch li {
                padding: 10px;
                list-style-type: none;
                float: left;
            }

                .ulSearch li a {
                    text-decoration: none;
                }

                .ulSearch li img {
                    float: left;
                    padding-right: 5px;
                    width: 100px;
                    height: 100px;
                }

                .ulSearch li div {
                    float: left;
                    width: 80%;
                }

                .ulSearch li span {
                    color: gray;
                }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>  
<body>  
  
    <script type="text/javascript">  
        function ResultSearch() {  
            if ($("#txtSearch").val().length > 0) {  
                var params = {  
                    
                    "q": $("#txtSearch").val(),  
                    "count": "9",  
                    "offset": "0",  
                    "mkt": "en-us",  
                    "safesearch": "Moderate",  
                };  
                $.ajax({  
                    url: "https://api.cognitive.microsoft.com/bing/v7.0/search?" + $.param(params),  
                    beforeSend: function (xhrObj) {  
                        
                        xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "3e15e8bab93a441ab541e2bae1c738c6"); 
                    },  
                    type: "GET",  
                    
                    data: "{body}",  
                })  
                .done(function (data) {  
                    $("#resultSearch").html("");  
                    if (data.images != undefined) {  
                        jQuery.each(data.images.value, function (index, value) {  
                            if (value.name != undefined) {  
                                $("#resultSearch").append("<li><img src=" + value.thumbnailUrl + "/><div>" + value.name + "<br/><span>" + value.webSearchUrl + "</span><br/>" + value.contentUrl + "</div></li>");  
                            }  
                        })  
                    }  
                    else if (data.webPages != undefined) {  
                        jQuery.each(data.webPages.value, function (index, value) {  
                            if (value.name != undefined) {  
                                $("#resultSearch").append("<li><div><a href=" + value.displayUrl + ">" + value.name + "</a></br>" + value.url + "<br/><span>" + value.snippet + " </span></div></li>")  
                            }  
                        })  
                    }  
                    else if (data.news != undefined) {  
                        jQuery.each(data.news.value, function (index, value) {  
                            if (value.name != undefined) {  
                                $("#resultSearch").append("<li><img src=" + value.images.thumbnail.contentUrl + "/><div><a href=" + value.url + ">" + value.name + "</a><br/><span>" + value.description + " </span><br/>" + value.datePublished + " </div></li>")  
                            }  
                        })  
                    }  
                })  
                .fail(function () {  
                    alert("No result found!!!");  
                });  
            } else {  
                alert("Please enter the text to search.");  
            }  
        }  
    </script>  
    Search  
    <input type="text" name="InputSearch" id="txtSearch" />  
    <input type="button" id="SearchButton" name="Search" value="Search" onclick="ResultSearch(); return false;" />  
    <ul class="ulSearch" id="resultSearch"></ul>  
</body>  
</html>

Now save the file and press F5 to run the project to check if it is working as expected.

Now type a Valid text in the Search text box and click on the Search button. You can able to see we got the expected output without any issue.

Microsoft Cognitive Services Bing Search Examples

So, we have discussed an excellent Microsoft Cognitive Services Bing Search Example.

You may also like following the below Articles

Wrapping Up

Well, in this article, we have discussed Microsoft Cognitive Services Bing Search Example, What is Cognitive Services Bing Search? and we also discussed What is Cognitive Services Bing Search?, Create Azure Cognitive Services Bing Search API in Azure Portal, Bing Search API JavaScript Example. Hope you have enjoyed this article !!!