Baidu-like drop-down prompt

Ajax applications in today's web projects are everywhere the most common and most commonly used places should be logon, forms, and search prompts. Today, I will share my own search pull-down tips.

The first step is when the front-end displays:

// Input box <input type = "text" id = "textword" onkeyup = "showtip (event, this);" onkeydown = "regword (this ); "onclick =" showtip (event, this); event. cancelbubble = true; event. returnvalue = false; "/> <input type =" button "id =" btnsearch "/> // The prompt list container <ul id =" sosotip "onclick =" hiddtip () "> </ul>

Step 2: the data format sent back from the background:

<Li id = "litooltip1" onmouseover = "mousestyle (this, 1)" onclick = "Redirect ('word 1 ') "> <label> prompt word 1 </label> <span> 10 times in total </span> </LI> <li id =" litooltip2 "onmouseover =" mousestyle (this, 2) "onclick =" Redirect ('prompt word 2 ') "> <label> prompt word 2 </label> <span> 6 times in total </span> </LI> <li id =" litooltip3 "onmouseover =" mousestyle (this, 3) "onclick =" Redirect ('word 3 ') "> <label> prompt word 3 </label> <span> searched twice </span> </LI>

The server directly returns the organized HTML code. In this way, the data will expand during transmission, but in this way, the complicated processing will be put at the server end, it is more convenient and simple to implement. In addition, as for the style positioning and display, we will not post it here. We will focus on our own interests and want to show how we can do it.

 

Below is the focus, JS Code:

// Hide the prompt box function hiddtip () {var tipul = document. getelementbyid ("sosotip"); tipul. style. display = "NONE";} // the upper and lower operations on the keyboard automatically change the value of the input box function AutoText (strtext) {document. getelementbyid ("textword "). value = strtext;} // hide the prompt box document when you click the other part of the page. body. onclick = function () {hiddtip () ;}; var preword = ""; // record the text box value var current = 0 when the keyboard operation is pressed; // The number of VaR staticword = "" in the selected prompt list; // record the value of the text box when the keyboard operation is pressed. When the upper/lower key operation is ignored, // when onkeydown is triggered, record the value of the text box at this time (so that on When keyup is used, the text box Value Comparison determines whether to request the server) function regword (target) {var tempword = target. value. Replace (/\ s/g, ""); If (tempword! = "") {Preword = tempword;} // display the prompt list. When onkeyup and onclick are in the text box, function showtip (oevent, target) {var sword = target is triggered. value. replace (// s/g, ""); // The value of the text box var ulcontainer = document. getelementbyid ("sosotip"); // The prompt list container if (sword = "") {ulcontainer. style. display = "NONE"; // hide the prompt} else if (sword. length <20) {If (sword! = Preword) // after the operation, the text box value changes {current = 0; preword = sword; If (oevent. keycode! = "38" | oevent. keycode! = "40") {staticword = preword;} ulcontainer. style. display = "NONE"; ulcontainer. innerhtml = ""; $. ajax ({// request type: "Get", URL: "ashx/searchtip. ashx ", data: {word: Sword}, success: function (result) {If (result! = "0") {ulcontainer. innerhtml = result; ulcontainer. style. Display = "Block" ;}}) ;}else if (ulcontainer. innerhtml! = "") // After the operation, the text box word is not changed {ulcontainer. style. display = "Block"; clearallstyle (); // clear all the styles in the prompt list if (oevent. keycode = "38") // It is {current --; If (current =-1) when the upward operation is performed on the keyboard) // select the last {var ULS = document. getelementbyid ("sosotip"); var ochilds = ULS. childnodes; current = ochilds. length; addlistyle (oevent, ochilds [Current-1]); // select the last} else {var fotar = document. getelementbyid ("litooltip" + current); If (fotar! = NULL) {addlistyle (oevent, fotar);} else // return to the text box {current = 0; AutoText (staticword );}}} else if (oevent. keycode = "40") // indicates the downward operation on the keyboard. {current ++; var fotar = document. getelementbyid ("litooltip" + current); If (fotar! = NULL) {addlistyle (oevent, fotar);} else // return to the text box {current = 0; AutoText (staticword);} else if (oevent. keycode = "13") // when entering the key, the trigger button {document. getelementbyid ("btnsearch "). click () ;}}// Add the selected Style Function addlistyle (oevent, target) {target.style.css text = "background-color: # 36C; color: # FFF; "; AutoText (target. childnodes [0]. innerhtml); oevent. cancelbubble = true; oevent. returnvalue = Fals E;} // interaction between the mouse and the keyboard. When the mouse is selected, you can press the up or down key to select the current up and down function mousestyle (target, currflag) {clearallstyle (); target.style.css text = "background-color: # 36C; cursor: pointer; color: # FFF;"; current = currflag;} // clear the selected Style Function clearallstyle () {var ULS = document. getelementbyid ("sosotip"); var ochilds = ULS. childnodes; For (VAR I = 0; I <ochilds. length; I ++) {ochilds[ I ].style.css text = "" ;}}// trigger function redirect (wor D) {location. href = "search. aspx? W = "+ encodeuri (Word );}

Ajax requests use jquery.