Use jsonp in jquery to implement the search box function, and implement jqueryjsonp.

Use jsonp in jquery to implement the search box function, and implement jqueryjsonp.

Previous words:
I wanted to publish an article last week to imitate Bing search. However, before preparing to write an article, I suddenly learned about ajax technology. Here I also asked my page to get data without manual refresh. However, I found that using the previous method cannot obtain the desired effect. Instead, I changed my computer system a few days ago and lost my previous source code (I had a bad habit of putting my recent work on the desktop ). I want to thoroughly understand this issue today.

Use jquery and ajax to make a preliminary attempt:

(This code is used to create a video by referring to MOOC and the search box. For more information, see the video. I couldn't find my previous code. The first idea was from there, so I used the code here this time)

Html code:

<Div class = "bg-div"> <div class = "search-box"> <div class = "logo"> </div> <form id = "search-form ""> <input type =" text "class =" search-input-text "autocomplete =" off "name =" q "id =" search_input "/> <input type =" submit "class =" search-input-button "value =" "id =" search_submit "> </form> </div> <div class =" suggest" id = "search-suggest" <! -- Style = "display: none; "--> <ul id =" search-result "> <li> search result 1 </li> <li> search result 2 </li> </ul> </ div>

Css code:

* {Padding: 0; margin: 0;} body {}. bg-div {background-image: url ('images/river.jpg '); width: 1228px; height: 690px; margin: 0 auto; position: relative ;}. logo {background-image: url ('images/logo.png '); width: pixel PX; height: 53px; float: left; margin:-4px 18px 0 0;} form {float: left; background-color: # fff; padding: 5px ;}. search-input-text {border: 0; float: left; height: 25px; line-height: 25px; outline: none; width: 350px; font-size: 16px ;}. search-input-button {border: 0; background-image: url ('images/search-button.png '); width: 29px; height: 29px; float: left ;}. search-box {position: absolute; top: 200px; left: 300px;} # search-suggest {width: 388px; background-color: # fff; border: 1px solid #999; display: none ;}. suggest ul {list-style: none ;}. suggest ul li {padding: 3px; font-size: 14px; line-height: 25px; cursor: pointer;/* hand type * // * This Code removes position: absolute; left: ---- px; top: ---- px ;*/}. suggest ul li: hover {text-decoration: underline; background-color: # e5e5e5 ;}

Use jquery to achieve the following results:
Before that, we basically got the graphic effect we wanted, however, entering the content you want to query in the search box does not work at this time (generally, when you enter the search box on the keyboard, the following shows some key search information associated with it, then move the mouse and click it to jump to the corresponding link ). To verify our ideas step by step, let's modify the previous code here.

1. Remove positioning from the li label;

2. Set the li tag to hidden in html. Then we will perform subsequent operations.

Thought 1:How can I display relevant information (that is, content in the li tag) when entering the keyboard )?

Idea: Introduce jquery first, execute a keyboard event after the document is loaded, and then change the css effect in the keyboard event.

$ (Function () {// keyboard event $ ("# search_input "). bind ("keyup", function () {$ ("# search-suggest" 2.16.show().css ({top: $ ("# search-form "). offset (). top + $ ("# search-form "). height () + 10, left: $ ("# search-form "). offset (). left, position: "absolute ",});});});

At this time, when we enter the content in the search box, the corresponding search (simulation) will be displayed below)

Thinking 2:How can I search the corresponding content when I click the search button?

Idea: Click an event with the mouse, set an address after the mouse clicks, and then jump directly to the corresponding address. Code implementation:

// Event proxy -- Click Event $ (document ). delegate ("li", "click", function () {var keyword = $ (this ). text (); location. href = "http://cn.bing.com/search? Q = "+ keyword ;});

Think 3:When entering data in the search box, how do we prompt related search information?
Idea: we use get IN jquery to implement it. Refer to the Code:

  var searchText = $("#search_input").val();  $.get( "http://api.bing.com/qsonhs.aspx?q="+searchText , function(data) {    console.log(data);    var d = data.AS.Results[0].Suggests;    var html = "";    for(var i = 0; i < d.length; i++) {     html += "<li>"+d[i].Txt+"</li>";    }    $("#search-result").html(html);   }   , "json");

Here, we should be able to get the expected results, but we haven't found any errors after looking for a long time. The video describes how to use JSONP for cross-origin operations. However, I still follow the operations in the video and cannot get the expected results. So I am immersed in javascript advanced programming. find the usage of jsonp

About jsonp:
Jsonp is rarely introduced in the book javascript advanced programming. The following is my summary.
The full write of jsonp is json with padding, which is used to solve the same-source policy problem between the main browsers, in general, the pages under the ServerA domain cannot communicate with resources under the non-ServerA, while the Html <script> element is an exception, using the <script> open-source policy, A webpage can dynamically obtain json data from other sources. This mode is called JSONP. Using jsonp to capture json data is not really javascript, it is compiled directly through the javascript compiler rather than the json interpreter.