jQuery+Bing API implements simple search engine

Microsoft officially released Bing, the successor to Live search, in June this year, and also provided a very comprehensive set of APIs. Like Google API, by using Bing API, web developers can integrate various services in Bing search into their websites, thereby enriching website functions and bringing traffic to the website. In this article, CSS9.NET uses a complete usage example to show you how to use jQuery to call the Bing API to implement a simple web search engine, and have a basic understanding of the Bing API.

First, let’s have a perceptual experience: online example

Bing API provides three search result data types: SOAP, XML, and JSON. In the example, the json data type interface is called through jQuery ajax to display the data. Let's take a look at its implementation:

Preparation :

Microsoft shows us detailed development documentation through the Bing API site:

1. Visit the bing developer site: http://bing.com/developers . You can also find the entrance to the Bing API on MSDN here.
2. Log in with a Microsoft account (if you don’t have one, you can only register one first)
3. Fill out the form and get the "APP ID" (used when calling the API, Microsoft needs to make sure you are a Microsoft developer)

HTML part

The page elements are very simple, mainly including five parts: search entrance, result display area, result description, error message display and page navigation. Let’s look at the HTML below:

<div class="line search-content">
<div class="column col-threefifths">
<h3 id="results-header"></h3>
<p id="results-summary"></p>
<!--Result display area-->
<div id="search-result">
<h3>Search results</h3>
<!-- Result description, such as how many entries are there in total, but which ones are before -->
<div id="result-aggregates" class="results"></div>
<ul id="result-list" class="results">
</ul>
<!--Page navigation-->
<ul id="result-navigation" class="result-navigation">
<li id="prev">&laquo;</li>
<li id="next">&raquo;</li>
</ul>
</div>
<!--Error message display-->
<p id="error-list">
</p>
</div>
<!--Search entrance-->
<div class="column last-col">
<h3>Enter search terms:</h3>
<p>
<input id="txtQuery" type="text" title="Search Terms" />
<button id="btnSearch" type="button" title="Search">Search</button>
</p>
</div>
</div>

Calling Bing API parts via jQuery

Define some parameters that need to be passed in to the Bing API: //The applied APP ID, replace it with your own here.
var AppId = "AppId=31F3C13DC5D41C42D4A18F9E04DE1DEA73762186";
//Get the search string by the user entering the search term
var Query = "Query="
//Specify the search source type. Bing provides all types such as web pages, videos, pictures, etc., refer to API
//Specified here is the web page type
var Sources = "Sources=Web";
//Specify API version
var Version = "Version=2.0";
//Specify the region, such as Google. The search results in each region are different. China is specified here.
var Market = "Market=zh-cn";
//Some option settings, here turn on search word highlighting in search results
var Options = "Options=EnableHighlighting";
//Return the number of items per page
varWebCount = 10;
//What page is the current page, starting from 0?
varWebOffset = 0;