<div class="codetitle"> <span><a style="CURSOR: pointer" data="75291" class="copybut" id="copybut75291" onclick="doCopy('code75291')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code75291"> <br><!-- Simulate google search--> <br><script type="text/javascript"> <br>/********************************Configurable Options****************** *****************/ <br>// Background color of selected similar keywords<br>var selectedBgColor = "#CCCCCC"; <br>// Background color of unselected similar keywords<br>var unselectedBgColor = "#FFFFFF"; <br>// Similar key The border of the word list box <br>var listBorder = "1 solid #000000"; <br>/***************************************************************************/ <br>/********************************Non-configurable options****************** *****************/ <br>// 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) <br>var oldKeyValue; <br>//The position of the mouse relative to the prompt keyword list box (0: prompt box Outside, 1: inside the prompt box) <br>var mouseLocation = 0; <br>//The currently selected prompt keyword index (starts from 0, equal to -1 means no item is selected) <br>var selectedKeyIndex = -1 ; <br>//The last selected prompt keyword index (starts from 0, equal to -1 means there is no last selected item) <br>var oldSelectedKeyIndex = -1; <br>//The total number of prompt keywords<br>var tdCount = 0; <br>/***************************************************************************/ <br>/* <br>Purpose: Add a method to remove left and right spaces to the String object<br>*/ <br>String.prototype.trim = function () { <br>var m = this.match(/^s*(S (s S )*)s*$/); <br>return (m == null) ? "" : m[1]; <br>} <br>/* <br>Purpose: Initialize the state of the prompt keyword list box<br>*/ <br>function initKeyListState(){ <br>selectedKeyIndex = -1; <br>oldSelectedKeyIndex = -1 ; <br>tdCount = 0; <br>} <br>/* <br>Purpose: Change the last selected keyword item to unselected<br>*/ <br>function disSelectedOldKey(){ <br> //Judgment instructions: oldSelectedKeyIndex!=selectedKeyIndex <br>// When there is only one similar keyword, there is no last selected keyword and this selected keyword. <br>// As long as after the first selection, press up or down arrow are selected. <br>if (oldSelectedKeyIndex!=-1&&oldSelectedKeyIndex!=selectedKeyIndex){ <br>$('keyId' oldSelectedKeyIndex).bgColor=unselectedBgColor; <br>} <br>//Last selected item update<br>oldSelectedKeyIndex = selectedKeyIndex ; <br>} <br>/* <br>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. <br>*/ <br>function setSelectedKey(){ <br>// The existence of $('keyId0') indicates that there is a relevant prompt keyword. If it does not exist, it will not be processed. <br>if($('keyId0')){ <br>if (event.keyCode==38){ <br>//------Handle upward events------ <br>if (selectedKeyIndex==-1){ <br>selectedKeyIndex = tdCount-1; <br>}else{ <br>selectedKeyIndex= (selectedKeyIndex tdCount-1)%tdCount; <br>} <br>$('keyId' selectedKeyIndex ).bgColor= selectedBgColor; <br>disSelectedOldKey(); <br>}else if (event.keyCode==40){ <br>//------Handling down events------<br>if (selectedKeyIndex==-1){ <br>selectedKeyIndex = 0; <br>}else{ <br>selectedKeyIndex = (selectedKeyIndex 1)%tdCount; <br>} <br>$('keyId' selectedKeyIndex) .bgColor= selectedBgColor; <br>disSelectedOldKey(); <br>}else if (event.keyCode==13){ <br>//------Handle the carriage return event------ <br>$('cond').value=$('keyId' selectedKeyIndex).innerText; <br>setCursorLast($('cond')); <br>// Hide prompt keyword list box<br>$(' dropdownlistDiv').style.display='none'; <br>} <br>} <br>} <br>/* <br>Purpose: Get similar keywords<br>*/ <br>function getConformKey() { <br>//Get the entered keyword <br>var keyValue = $('cond').value.trim(); <br>// 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.<br>if (keyValue!=oldKeyValue){ <br>// If the keyword is empty, do not go to the server to obtain a list of similar keywords <br>if (keyValue==''){ <br>DWRUtil.removeAllRows('showKeyList '); <br>setDropListVisible(false); <br>initKeyListState(); <br>}else{ <br>//Use ajax asynchronous mode to obtain similar keywords (useraction here, change to your own action) <br>useraction.findByLike(keyValue,conformKeyCallback); <br>} <br>} <br>} <br>/* <br>Purpose: Get keyword callback method<br>*/ <br>function conformKeyCallback(keyList) { <br>DWRUtil.removeAllRows('showKeyList'); <br>initKeyListState(); <br>if (keyList.length>0){ <br>// Generate similar keyword prompt box <br>DWRUtil.addRows( 'showKeyList',keyList,cellFuncs, { <br>cellCreator:function(options) { <br>var td = document.createElement("td"); <br>td.id = 'keyId' tdCount; <br>td .onmouseover = function (){selectedKeyIndex=parseInt(this.id.substring(5,td.id.length));this.bgColor=selectedBgColor;disSelectedOldKey();}; <br>td.onclick= function (){ <br>$('cond').value=this.innerText; <br>$('cond').focus(); <br>setCursorLast($('cond')); <br>$('dropdownlistDiv ').style.display='none'; <br>}; <br>return td; <br>},escapeHtml:false}); <br>setDropListVisible(true); <br>}else{ <br> setDropListVisible(false); <br>} <br>} <br>/* <br>Purpose: table data display processing method <br>*/ <br>var cellFuncs = [ <br>function(data) { return data .username; } <br>]; <br>/* <br>Purpose: Move the cursor of the input box to the end <br>*/ <br>function setCursorLast(inputObj){ <br>var inputRange = inputObj.createTextRange (); <br>inputRange.collapse(true); <br>inputRange.moveStart('character',inputObj.value.length); <br>inputRange.select(); <br>} <br>/* <br>Purpose: Create a similar keyword list box<br>*/ <br>function createShowDiv(){ <br>var showDiv = document.createElement("div"); <br>showDiv.id = "dropdownlistDiv"; <br>with(showDiv.style){ <br>position = "absolute"; <br>//The absolute position of the layer is adjusted from here<br>left = parseInt($('cond').style.left.replace( 'px','')) 190; <br>top = parseInt($('cond').style.top.replace('px','')) parseInt($('cond').style.height .replace('px','')) 28; <br>width = parseInt($('cond').style.width.replace('px','')); <br>border = listBorder; <br>zIndex = "1"; <br>display='none'; <br>backgroundColor = unselectedBgColor; <br>} <br>showDiv.onmouseover=function (){mouseLocation=1;}; <br>showDiv. onmouseout=function (){mouseLocation=0;}; <br>//overflow set scroll bar<br>showDiv.innerHTML = "<div style='width:100%;height:150px;overflow:auto;'> ;<table border='0' style='width: 100%;height:20%;font-size: 12;color:#33CC00;'><tbody id='showKeyList' style='margin-left : 0;margin-right: 0;margin-bottom: 0;margin-top: 0;'></tbody></table></div>"; <br>document.body.appendChild( showDiv); <br>initKeyListState(); <br>} <br>/* <br>Purpose: Set whether the similar keyword list box is visible<br>Parameter: isDisplay, true means visible, false means invisible<br> */ <br>function setDropListVisible(isDisplay){ <br>if (mouseLocation == 1){ <br>return; <br>} <br>if (($('cond').value.trim()! ='')&&(isDisplay==true)){ <br>$('dropdownlistDiv').style.display=''; <br>} <br>else{ <br>$('dropdownlistDiv').style .display='none'; <br>} <br>} <br>// Attach the method of creating a similar keyword list box to the onload event <br>if (window.addEventListener){ <br>window.addEventListener( 'load', createShowDiv, false); <br>}else if (window.attachEvent){ <br>window.attachEvent('onload', createShowDiv); <br>} <br></script> <br> </div> <br>This js can be placed in the jsp you need to achieve the search effect, or saved as a separate js file. <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="67005" class="copybut" id="copybut67005" onclick="doCopy('code67005')"><u>Copy code</u></a></span> The code is as follows: </div> <div class="codebody" id="code67005"> <br><div style="position:absolute;left:190px;top:25px;"> <br><input AUTOCOMPLETE="off" <BR>onkeydown="oldKeyValue=this.value.trim();setSelectedKey();" <BR>onkeyup="getConformKey();" <BR>onfocus="if(this.value=='Find someone') this .value='';setDropListVisible(true);" <BR>onblur="setDropListVisible(false);" <BR>style="width: 300; height: 23;z-index: 10;top:0;left: 0;" type="text" name="cond" value="Find someone" id="cond" /> <br><input type="button" class="btn" value="Search" onclick ="findBylike();" /> <br></div> <br> </div> <br>useraction.findByLike(String name); is a query method of the dao layer, <br> returns a List, Just replace this with your own implementation.
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
