Microsoft cognitive services
In this article, I'll explain how we can use Microsoft Cognitive Services for Search API, step by step.
Step 1
To consume Cognitive Services, you should have an A
zure account. If you don't have any, you can create
free account.
Step 2
Click here and login.
Step 3
Now, follow these steps which I have marked into below image as follow.
Step 4
Create Search API. You can put the name you want and provide more information as below.
Click on "Create" button.
Step 5
Now, click on "All Resources" in left panel and then find your service which you have recently created. Bing Search Panel will open and follow these steps which I have marked on the below screen.
Step 6
Copy any one key and use it in your project.
Step 7
Now, create a new application and write the below code.
JavaScript code
- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="BingSearch.aspx.cs" Inherits="BingSearch" %>
-
- <!DOCTYPE html>
-
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
-
- <title>Microsoft Cognitive Services Bing Search API- by puru</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="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
- </head>
- <body>
-
- <script type="text/javascript">
- function Search() {
- if ($("#InputSearch").val().length > 0) {
- var params = {
-
- "q": $("#InputSearch").val(),
- "count": "10",
- "offset": "0",
- "mkt": "en-us",
- "safesearch": "Moderate",
- };
- $.ajax({
- url: "https://api.cognitive.microsoft.com/bing/v5.0/search?" + $.param(params),
- beforeSend: function (xhrObj) {
-
- xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "xxx863xxx3434xxx852xxxc562xxx68");//put you key here
- },
- type: "GET",
-
- data: "{body}",
- })
- .done(function (data) {
- $("#UlSearchResult").html("");
- if (data.images != undefined) {
- jQuery.each(data.images.value, function (index, value) {
- if (value.name != undefined) {
- $("#UlSearchResult").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) {
- $("#UlSearchResult").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) {
- $("#UlSearchResult").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 what you want to search.");
- }
- }
- </script>
- Search
- <input type="text" name="InputSearch" id="InputSearch" />
- <input type="button" id="SearchButton" name="Search" value="Search" onclick="Search(); return false;" />
- <ul class="ulSearch" id="UlSearchResult"></ul>
- </body>
- </html>