DWR realizes the principle and code of simulating Google search effect_javascript skills

Copy code The code is as follows: /********************************Configurable Options****************** *****************/ // Background color of selected similar keywords var selectedBgColor = "#CCCCCC"; // Background color of unselected similar keywords var unselectedBgColor = "#FFFFFF"; // Similar key The border of the word list box var listBorder = "1 solid #000000"; /***************************************************************************/ /********************************Non-configurable options****************** *****************/ // The last key entered word (used to determine whether the keyword has changed, otherwise it will not go to the server to obtain the prompt keyword again) var oldKeyValue; //The position of the mouse relative to the prompt keyword list box (0: prompt box Outside, 1: inside the prompt box) var mouseLocation = 0; //The currently selected prompt keyword index (starts from 0, equal to -1 means no item is selected) var selectedKeyIndex = -1 ; //The last selected prompt keyword index (starts from 0, equal to -1 means there is no last selected item) var oldSelectedKeyIndex = -1; //The total number of prompt keywords var tdCount = 0; /***************************************************************************/ /* Purpose: Add a method to remove left and right spaces to the String object */ String.prototype.trim = function () { var m = this.match(/^s*(S (s S )*)s*$/); return (m == null) ? "" : m[1]; } /* Purpose: Initialize the state of the prompt keyword list box */ function initKeyListState(){ selectedKeyIndex = -1; oldSelectedKeyIndex = -1 ; tdCount = 0; } /* Purpose: Change the last selected keyword item to unselected */ function disSelectedOldKey(){ //Judgment instructions: oldSelectedKeyIndex!=selectedKeyIndex // When there is only one similar keyword, there is no last selected keyword and this selected keyword. // As long as after the first selection, press up or down arrow are selected. if (oldSelectedKeyIndex!=-1&&oldSelectedKeyIndex!=selectedKeyIndex){ $('keyId' oldSelectedKeyIndex).bgColor=unselectedBgColor; } //Last selected item update oldSelectedKeyIndex = selectedKeyIndex ; } /* Purpose: Select a new prompt keyword item when pressing the up and down arrows, and enter the selected prompt keyword into the search box when pressing Enter. */ function setSelectedKey(){ // The existence of $('keyId0') indicates that there is a relevant prompt keyword. If it does not exist, it will not be processed. if($('keyId0')){ if (event.keyCode==38){ //------Handle upward events------ if (selectedKeyIndex==-1){ selectedKeyIndex = tdCount-1; }else{ selectedKeyIndex= (selectedKeyIndex tdCount-1)%tdCount; } $('keyId' selectedKeyIndex ).bgColor= selectedBgColor; disSelectedOldKey(); }else if (event.keyCode==40){ //------Handling down events------ if (selectedKeyIndex==-1){ selectedKeyIndex = 0; }else{ selectedKeyIndex = (selectedKeyIndex 1)%tdCount; } $('keyId' selectedKeyIndex) .bgColor= selectedBgColor; disSelectedOldKey(); }else if (event.keyCode==13){ //------Handle the carriage return event------ $('cond').value=$('keyId' selectedKeyIndex).innerText; setCursorLast($('cond')); // Hide prompt keyword list box $(' dropdownlistDiv').style.display='none'; } } } /* Purpose: Get similar keywords */ function getConformKey() { //Get the entered keyword var keyValue = $('cond').value.trim(); // If the query keyword this time is the same as the last time, then no Go to the server to retrieve a list of similar keywords. if (keyValue!=oldKeyValue){ // If the keyword is empty, do not go to the server to obtain a list of similar keywords if (keyValue==''){ DWRUtil.removeAllRows('showKeyList '); setDropListVisible(false); initKeyListState(); }else{ //Use ajax asynchronous mode to obtain similar keywords (useraction here, change to your own action) useraction.findByLike(keyValue,conformKeyCallback); } } } /* Purpose: Get keyword callback method */ function conformKeyCallback(keyList) { DWRUtil.removeAllRows('showKeyList'); initKeyListState(); if (keyList.length>0){ // Generate similar keyword prompt box DWRUtil.addRows( 'showKeyList',keyList,cellFuncs, { cellCreator:function(options) { var td = document.createElement("td"); td.id = 'keyId' tdCount; td .onmouseover = function (){selectedKeyIndex=parseInt(this.id.substring(5,td.id.length));this.bgColor=selectedBgColor;disSelectedOldKey();}; td.onclick= function (){ $('cond').value=this.innerText; $('cond').focus(); setCursorLast($('cond')); $('dropdownlistDiv ').style.display='none'; }; return td; },escapeHtml:false}); setDropListVisible(true); }else{ setDropListVisible(false); } } /* Purpose: table data display processing method */ var cellFuncs = [ function(data) { return data .username; } ]; /* Purpose: Move the cursor of the input box to the end */ function setCursorLast(inputObj){ var inputRange = inputObj.createTextRange (); inputRange.collapse(true); inputRange.moveStart('character',inputObj.value.length); inputRange.select(); } /* Purpose: Create a similar keyword list box */ function createShowDiv(){ var showDiv = document.createElement("div"); showDiv.id = "dropdownlistDiv"; with(showDiv.style){ position = "absolute"; //The absolute position of the layer is adjusted from here left = parseInt($('cond').style.left.replace( 'px','')) 190; top = parseInt($('cond').style.top.replace('px','')) parseInt($('cond').style.height .replace('px','')) 28; width = parseInt($('cond').style.width.replace('px','')); border = listBorder; zIndex = "1"; display='none'; backgroundColor = unselectedBgColor; } showDiv.onmouseover=function (){mouseLocation=1;}; showDiv. onmouseout=function (){mouseLocation=0;}; //overflow set scroll bar showDiv.innerHTML = " "; document.body.appendChild( showDiv); initKeyListState(); } /* Purpose: Set whether the similar keyword list box is visible Parameter: isDisplay, true means visible, false means invisible */ function setDropListVisible(isDisplay){ if (mouseLocation == 1){ return; } if (($('cond').value.trim()! ='')&&(isDisplay==true)){ $('dropdownlistDiv').style.display=''; } else{ $('dropdownlistDiv').style .display='none'; } } // Attach the method of creating a similar keyword list box to the onload event if (window.addEventListener){ window.addEventListener( 'load', createShowDiv, false); }else if (window.attachEvent){ window.attachEvent('onload', createShowDiv); } This js can be placed in the jsp you need to achieve the search effect, or saved as a separate js file. Copy code The code is as follows: onkeydown="oldKeyValue=this.value.trim();setSelectedKey();" onkeyup="getConformKey();" onfocus="if(this.value=='Find someone') this .value='';setDropListVisible(true);" onblur="setDropListVisible(false);" style="width: 300; height: 23;z-index: 10;top:0;left: 0;" type="text" name="cond" value="Find someone" id="cond" /> useraction.findByLike(String name); is a query method of the dao layer, returns a List, Just replace this with your own implementation.

DWR realizes the principle and code of simulating Google search effect_javascript skills

Related articles