JS implementation similar to Baidu hint function

<div>   onkeyup= "Doquery () This keyboard event is important for dynamic interaction
   <div id= "div" style= "position:absolute;z-index:100" >  <table id= "table" >    </table>   </div><div>

The above is the basic JSP page

--------------------------------------------------------------------------------------------------------------- --------------------------------------

The corresponding JS code

$(function(){             $("condition"). Val ("");//clears the form value when refreshed    //----------------------Tip Information--------------------------------$ ("#condition"). Bind ("MouseOver",function() {doquery (); $("#div"). Show (); }). bind ("Mouseout",function () {                $("#div"). Hide (); }). bind ("OnKeyUp",function() {getlinkdata ();                        }); $("#div"). Bind ("MouseOver",function () {                $("#div"). Show (); }). bind ("Mouseout",function () {                $("#div"). Hide (); })});

functionGetlinkdata () {vardiv = $ ("#div");//get the corresponding Div object                varTable= $ ("#table");//get the corresponding Tbody object                varCondition= $ ("#table");//get the corresponding input box objectClear ();//clear the contents of the Legend Input prompt box                //use Ajax to get the data of the fuzzy query in the background, and encapsulate it in the form of a drop-down list.$.ajax ({type:"POST", DataType:"JSON", URL: $. Web_root+ ', Data:jQuery.param ({"Condition": $.trim ($ ("#condition"). Val ())}, Error:function() {alert ("There is no corresponding data, please check the input query criteria!" "); }, Success:function(data) {//the method that is called when the Ajax commit succeeds                                  if(data.length==0){                                      return; } setoffsets ();//set the location of the Lenovo input drop-down list prompt box                                  varTr,td,text;  for(vari = 0; i < data.length; i++) {//based on the returned value, the contents of the manual tbodyText = document.createTextNode (data[i].name);//Remove the value of name from the data returned in the actionTD = Document.createelement ("TD");//to create a TD objectTR = document.createelement ("tr");//create an object of TR classname= "MouseOver; $ (TD). MouseOver (function(){                                          $( This). attr ("Class", "MouseOver");                                      }); $ (TD). Mouseout (function(){                                          $( This). attr ("Class", "" ");                                      }); Td.onclick=function() {Populatemodel ( This)};//Click TD Yes Method for Populatemodeltd.appendchild (text);                                                  Tr.appendchild (TD);                                  Div.appendchild (TR);                }                                }                        }); //method to invoke when clicking an option in the drop-down list                functionPopulatemodel (cell) {clear (); Condition.value=Cell.firstChild.nodeValue; //Initotherdata (condition.value); Use the data in the input box to call other methods to initialize other dataClear ();//Clear Auto-complete line                }                //clear the Auto-complete line, as long as the tbody has child nodes to delete, and will be the perimeter of the Div border property set to invisible                functionClear () { while(Div.childNodes.length > 0) {div.removechild (div.firstchild); } div.attr ("Display", "none"); }                //set the location and style of the drop-down list                functionsetoffsets () {varwidth = condition.offsetwidth;//gets the relative width of the linkdataproperty input box                    varleft =GetLeft (condition); vartop = GetTop (condition) +Condition.offsetheight; Div.style.border= "Black 1px solid"; Div.style.left= left + "px"; Div.style.top= top + "px"; Div.style.width= width + "px"; }                //gets the starting position of the width of the specified element in the page                functionGetLeft (e) {varoffset =E.offsetleft; if(E.offsetparent! =NULL) {offset+=GetLeft (e.offsetparent); }                    returnoffset; }                //Gets the height start position of the specified element in the page                functionGetTop (e) {varoffset =E.offsettop; if(E.offsetparent! =NULL) {offset+=GetTop (e.offsetparent); }                    returnoffset; }            }                  //empty the data in the input box            functionClear () {varCondition=document.getelementbyid ("Condition"); Condition.value=""; }

--------------------------------------------------------------------------------------------------------------- ---------------------------------

Drop-down box swipe to select CSS for color changes

. MouseOver {    background: red;}

JS implementation similar to Baidu hint function