Use JSONP cross-domain call Baidu JS to implement the search box intelligent hints, and the mouse and keyboard to the popup box candidate words "attached source and online test address"

Search is often used in projects, especially for navigation-class sites. Do your own keyword search is not very realistic, directly call Baidu is the best choice.
Using Jquery.ajax's Jsonp method can be called to Baidu's JS and get the return value, of course $.getscript can also realize cross-domain call JS.

Jsonp Quick Start:
"Original" Say json and JSONP, maybe you'll be enlightened, including jquery use cases
The Jsonp method for Jquery.ajax is used and its error callback function does not execute correctly, please refer to the Director Dudu's article:
Limitations of using JSONP in jquery Ajax
jquery Plugin Jquery-jsonp Use note
Other articles about JSONP:
A solution for Ajax cross-domain communication using IFRAME

OK, after understanding the principle and application of JSONP, we see how Baidu's smart tips are done
Check out the Baidu search request under Chrome's debug window. When the keyword "A" is entered, the request

Use Firebug to see the parameters of the request,

Request method: Get Request
Request Parameters: WD is obviously to search for keywords; CB is the request to return the processing function, the name can be given casually; t is a timestamp to prevent the cache; p do not know what the meaning, each request to 3 can be; SID does not know what the meaning, do not also request, if you want to also can carry, the value is the above value

Request address and parameters are known, so write down the following JS test can get keyword prompt (source of the test.html page):

 var  qsdata = {' WD ': ' A ', ' P ': ' 3 ', ' CB ': ' GetData ', ' t ':  ' jsoncallback ' 

The qsdata encapsulates all the parameters to be sent by the request; GetData is a custom name that handles the returned keywords (the following sample code prints the requested keyword back to the Firebug console):

        function GetData (data) {            var Info = data[' s '];  // Get Asynchronous Data             Console.log (Info);        }

Monitor the text box below, send AJAX requests in real time and get back the data like this:

OK, the test is available and you can actually get the keyword hint. But always can not put a bunch of keywords to the front desk to let users see, at least as Baidu, you can use the mouse and keyboard arrow keys from the candidate box to choose the word bar.
The most critical to come, now began to write complete smart tips and with the mouse and keyboard to the candidate word operation (source of the index.html page), to achieve the following functions:

1. Real-time monitoring of the letter keys and number keys, press on the AJAX request (you can also set a delay to send requests, the source has), while monitoring the space, backspace, Delete, enter and other keys;
2. Mouse into the pop-up layer highlighted row, click to screen;
3. Press the keyboard up and DOWN ARROW keys can select candidate words, enter the submission to jump to Baidu search page;
4. Click on other parts of the page to automatically hide the popup box;
5. Press the ESC key to hide the popup box

Monitor the mouse and keyboard input JS (autocomplete.js source has more detailed comments):

varTimeoutid;//Delay Request ServervarHighlightindex =-1;//Highlight Mark$(function () {    $("#searchText"). KeyUp (function(event) {varMyEvent = Event | |window.event; varKeyCode =Myevent.keycode; //Console.log (keycode);        //Monitor Keyboard        if(KeyCode >= && keycode <= | | keycode >=-&& keycode <=-keycode | | >= &&am P KeyCode <= 111 | | KeyCode >= 186 && keycode <= 222 | | KeyCode = = 8 | | KeyCode = = 46 | | KeyCode = = 32 | | KeyCode = = 13) {            //Delay Operation            //cleartimeout (timeoutid);            //Timeoutid = setTimeout (function () {            //Timeoutid = Fillurls ();            //}, $)Fillurls ();//Asynchronous Request            if(Highlightindex! =-1) {Highlightindex=-1; }        }        Else if(keycode = = | | keycode = = 40) {            if(keycode = = 38) {//Upward                varAutonodes = $ ("#auto"). Children ("div"))                if(Highlightindex! =-1) {Autonodes.eq (highlightindex). CSS ("Background-color", "white"); Highlightindex--; } Else{Highlightindex= Autonodes.length-1; }                if(Highlightindex = =-1) {Highlightindex= Autonodes.length-1; } autonodes.eq (Highlightindex). CSS ("Background-color", "#ebebeb"); varComtext =Autonodes.eq (highlightindex). text (); $("#searchText"). Val (Comtext); }            if(keycode = = 40) {//downward                varAutonodes = $ ("#auto"). Children ("div"))                if(Highlightindex! =-1) {Autonodes.eq (highlightindex). CSS ("Background-color", "white"); } Highlightindex++; if(Highlightindex = =autonodes.length) {Highlightindex= 0; } autonodes.eq (Highlightindex). CSS ("Background-color", "#ebebeb"); varComtext =Autonodes.eq (highlightindex). text (); $("#searchText"). Val (Comtext); }        } Else if(keycode = = 13) {//Enter            if(Highlightindex! =-1) {                varComtext = $ ("#auto"). Hide (). Children ("div"). EQ (highlightindex). text (); Highlightindex=-1; $("#searchText"). Val (Comtext); } Else {                $("#auto"). Hide (); $("#searchText"). Get (0). blur (); }        } Else if(keycode = = 27) {//Press ESC to hide the pop-up layer            if($ ("#auto"). Is (": Visible")) {                $("#auto"). Hide (); }        }    });

Finally realize the effect show. The mouse can select candidate words can also be keyboard direction key selection, click on the screen, enter the direct jump to Baidu page:

Source: Click to download

Online Demo Address: Click to jump

Excerpt from: http://blog.csdn.net/dyllove98/article/details/9674411

Baidu search box Prompt entry get address:

Http://suggestion.baidu.com/su?wd=word

Https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=word

Use JSONP cross-domain call Baidu JS to implement the search box intelligent hints, and the mouse and keyboard to the popup box candidate words "attached source and online test address"