Bing Search API JavaScript Example

Microsoft bing search api example

In this Azure tutorial, we will discuss the Bing Search API JavaScript Example.

Azure Cognitive Services Bing Search API is one of the excellent services from Microsoft that actually helps you implement Intelligent search in your application. This Search API helps you implement the search capability that can get web search results from billions of web pages, Images, Videos, news, etc.

As part of this 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.

Create Azure Cognitive Services Bing Search API in Azure Portal

Follow the below steps.

1. Log in to the Azure Portal (https://portal.azure.com/)

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

Bing Search API Example

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

Microsoft Cognitive Services Bing Search Example

3. Now click on the Create button on the next window, as highlighted below

Create Azure Cognitive Services Bing Search API Azure Portal

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

  • Name: Provide a unique name for the Azure Cognitive Services Bing Search API.
  • Subscription: Choose a valid subscription to use to create the Azure Cognitive Services Bing Search API.
  • Pricing tier: You can choose the pricing tier based on your requirements. For the Demo purpose, you can choose the Free F1 pricing tier, which will provide 3 calls per second and 1k calls per month. You can click on the View full pricing details link to learn 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.

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

Create Azure Cognitive Services Bing Search API using Azure Portal

The deployment was completed successfully without any issues. 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.

Create Microsoft Bing Search API

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 see the key1 and key2 values 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 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 the Azure Cognitive Services Bing Search API in the Azure Portal. The next step is to create a Windows application that will consume the API that we 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.

1. Open Visual Studio 2019 and click the Create a new project button in the Getting Started window.

2. 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

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

bing search api javascript example

4. 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 see the Project was created successfully without any issues, as shown below.

bing search api example

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

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

bing search api v7

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 see we got the expected output without any issues.

Microsoft Cognitive Services Bing Search Examples

You may also like following the below Articles

Wrapping Up

Well, in this article, we have discussed a Microsoft Cognitive Services Bing Search Example. I hope you have enjoyed it!