DWR simulates Google search results

<! -- Simulate Google search --> <SCRIPT type = "text/JavaScript"> /*********************** **************************** * *** // the background color of the selected similar keyword var selectedbgcolor = "# cccccc "; // unselected background color of similar keywords var unselectedbgcolor = "# ffffff"; // border var listborder = "1 solid #000000" in the list box of similar keywords "; /*************************************** ************************************//** ******* ** * ******************** // The Last keyword entered (used to determine whether the keyword has changed, if no keyword exists, you 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: Outside the prompt box, 1: Inside the prompt box) var mouselocation = 0; // The currently selected prompt keyword index (starts from 0 and is equal to-1, indicating that the item is not selected) var selectedkeyindex =-1; // The last selected prompt keyword index (starting from 0 and equal to-1 indicates that the last selected item has not been selected) var oldselectedkeyindex =-1; // The total number of prompt keywords var tdcount = 0; /*************************************** * ********************************** //: add a String object Add and remove left and right Spaces */string. prototype. trim = function () {var M = This. match (/^ \ s * (\ s +) *) \ s * $/); Return (M = NULL )? "": M [1];}/* purpose: Initialize the status of the keyword list box */function initkeyliststate () {selectedkeyindex =-1; oldselectedkeyindex =-1; tdcount = 0;}/* purpose: Change the last selected keyword to unselected */function disselectedoldkey () {// judgment Description: oldselectedkeyindex! = Selectedkeyindex // when there is only one similar keyword, the last and current selected keywords do not exist. // after the first selection, the up or down arrows are selected. If (oldselectedkeyindex! =-1 & oldselectedkeyindex! = Selectedkeyindex) {$ ('keyid' + oldselectedkeyindex ). bgcolor = unselectedbgcolor;} // The oldselectedkeyindex = selectedkeyindex was updated last time.}/* purpose: select the new prompt keyword when pressing the up or down arrow, press enter to enter the selected prompt keyword in the search box. */Function setselectedkey () {// $ ('keyid0') indicates that the related prompt keyword exists. If it does not exist, it is not processed. If ($ ('keyid0') {If (event. keycode = 38) {// ------ handle up event ------ if (selectedkeyindex =-1) {selectedkeyindex = tdCount-1;} else {selectedkeyindex = (selectedkeyindex + tdCount-1) % tdcount ;} $ ('keyid' + selectedkeyindex ). bgcolor = selectedbgcolor; disselectedoldkey ();} else if (event. keycode = 40) {// ------ process downstream events ------ if (selectedkeyindex =-1) {selectedkeyindex = 0;} else {selectedkeyindex = (selectedkeyin Dex + 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 the prompt keyword list box $ ('dropdownlistdiv '). style. display = 'none' ;}}/ * purpose: obtain a similar keyword */function getconformkey () {// obtain the input keyword var keyValue =$ ('cond '). value. trim (); // if this query keyword matches the previous Similarly, you do not need to go to the server to re-obtain the list of similar keywords. If (keyValue! = Oldkeyvalue) {// If the keyword is null, the system does not go to the server to obtain a list of similar keywords. If (keyValue = '') {dwrutil. removeallrows ('showkeylist'); setdroplistvisible (false); initkeyliststate ();} else {// obtain similar keywords in Ajax asynchronous mode (here, change useraction to your own action) useraction. findbylike (keyValue, conformkeycallback) ;}}/* purpose: Obtain the keyword callback Method */function conformkeycallback (keylist) {dwrutil. removeallrows ('showkeylist'); initkeyliststate (); If (keylist. length> 0) {// generate a similarity Key-word 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 in 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"; // adjust the absolute position of the layer from this 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 sets the scroll bar showdiv. innerhtml = "<Div style = 'width: 100%; Height: 150px; overflow: auto; '> <Table border = '0' style = 'width: 100%; Height: 20%; font-size: 12; color: #33cc00; '> <TBO Dy id = 'showkeylist' style = 'margin-left: 0; margin-Right: 0; margin-bottom: 0; margin-top: 0; '> </tbody> </table> </div> "; document. body. appendchild (showdiv); initkeyliststate ();}/* purpose: Set whether The ListBox with similar keywords is visible. Parameter: isdisplay; true indicates visible; false indicates invisible */function setdroplistvisible (isdisplay) {If (mouselocation = 1) {return;} If ($ ('cond '). value. trim ()! = '') & (Isdisplay = true) {$ ('dropdownlistdiv '). style. display = '';} else {$ ('dropdownlistdiv '). style. display = 'none';} // attaches the method for 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) ;}</SCRIPT>

This JS file can be stored in the JSP file you need to implement search results, or saved as a JS file separately.

<Div style = "position: absolute; left: pixel PX; top: 25px;"> <input AutoComplete = "off" onkeydown = "oldkeyvalue = This. value. trim (); setselectedkey (); "onkeyup =" getconformkey (); "onfocus =" If (this. value = 'others') 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 "/> <input type =" button "class =" BTN "value =" Search "onclick =" findbylike (); "/> </div>

Useraction. findbylike (string name); is a query method at the DaO layer,
Return a list and replace it with your own implementation.

Download sample source code for perfect Google search results