<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><!-- Google 검색 시뮬레이션--> <br><script type="text/javascript"> <br>/********************************구성 가능한 옵션****************** *****************/ <br>// 배경 선택된 유사 키워드의 색상<br>var selectedBgColor = "#CCCCCC"; <br>// 선택되지 않은 유사 키워드의 배경색<br>var unselectedBgColor = "#FFFFFF" <br>// 유사 키 단어의 테두리 목록 상자 <br>var listBorder = "1 solid #000000"; <br>/************************************************** *************************/ <br>/********************************구성할 수 없는 옵션**************** *******************/ <br>// 마지막으로 입력한 단어( 키워드가 변경되었는지 확인합니다. 그렇지 않으면 다시 프롬프트 키워드를 얻기 위해 서버로 이동하지 않습니다.) <br>var oldKeyValue <br>//프롬프트 키워드 목록 상자를 기준으로 한 마우스 위치(0: 프롬프트 상자) 외부, 1: 프롬프트 상자 내부) <br>var mouseLocation = 0; <br>//현재 선택된 프롬프트 키워드 인덱스(0부터 시작하고 -1이면 선택된 항목이 없음을 의미) <br>var selectedKeyIndex = - 1 ; <br>//마지막으로 선택한 프롬프트 키워드 인덱스(0부터 시작하고 -1이면 마지막으로 선택한 항목이 없음을 의미) <br>var oldSelectedKeyIndex = <br>//총 프롬프트 키워드 수 <br>var tdCount = 0; <br>/************************************************** *************************/ <br>/* <br>목적: String 객체에 왼쪽 및 오른쪽 공백을 제거하는 메서드 추가<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>목적: 프롬프트 키워드 목록 상자의 상태 초기화<br>*/ <br>function initKeyListState(){ <br>selectedKeyIndex = -1 ; <br>oldSelectedKeyIndex = -1 ; <br>tdCount = 0; <br>} <br>/* <br>목적: 마지막으로 선택한 키워드 항목을 선택 해제로 변경<br>*/ <br>function disSelectedOldKey() { <br> //판정 지침: oldSelectedKeyIndex!=selectedKeyIndex <br>// 유사 키워드가 1개만 있는 경우 마지막 선택 키워드는 없고 이 선택 키워드는 없습니다. <br>// 첫 번째 선택 이후에 한해, 위쪽 또는 아래쪽 화살표를 누르십시오. <br>if (oldSelectedKeyIndex!=-1&&oldSelectedKeyIndex!=selectedKeyIndex){ <br>$('keyId' oldSelectedKeyIndex).bgColor=unselectedBgColor; <br>} <br>//마지막으로 선택한 항목 업데이트<br>oldSelectedKeyIndex = selectedKeyIndex ; <br>} <br>/* <br>용도: 위쪽 및 아래쪽 화살표를 눌러 새 프롬프트 키워드 항목을 선택하고 Enter 키를 눌러 선택한 프롬프트 키워드를 검색창에 입력합니다. <br>*/ <br>function setSelectedKey(){ <br>// $('keyId0')이 존재한다는 것은 관련 프롬프트 키워드가 존재하지 않는다는 것을 의미합니다. <br>if($('keyId0')){ <br>if (event.keyCode==38){ <br>//------상승 이벤트 처리------ <br>if (selectedKeyIndex==-1){ <br>selectedKeyIndex = tdCount-1; <br>}else{ <br>selectedKeyIndex= (selectedKeyIndex tdCount-1)%tdCount; <br>$('keyId' selectedKeyIndex ).bgColor= selectedBgColor; <br>disSelectedOldKey(); <br>}else if (event.keyCode==40){ <br>//------이벤트 처리------<br>if (selectedKeyIndex==-1){ <br>selectedKeyIndex = 0; <br>}else{ <br>selectedKeyIndex = (selectedKeyIndex 1)%tdCount; <br>$('keyId' selectedKeyIndex) . bgColor= selectedBgColor; <br>disSelectedOldKey(); <br>}else if (event.keyCode==13){ <br>//------캐리지 리턴 이벤트 처리------ <br>$('cond').value=$('keyId' selectedKeyIndex).innerText; <br>setCursorLast($('cond')) <br>// 프롬프트 키워드 목록 상자 숨기기<br>$(' dropdownlistDiv ').style.display='none'; <br>} <br>} <br>} <br>/* <br>목적: 유사한 키워드 가져오기<br>*/ <br>function getConformKey() { <br>//입력한 키워드 가져오기 <br>var keyValue = $('cond').value.trim() <br>// 이번 쿼리 키워드가 지난번과 동일하면 no 바로가기 유사한 키워드 목록을 검색하는 서버입니다.<br>if (keyValue!=oldKeyValue){ <br>// 키워드가 비어 있으면 유사한 키워드 목록을 얻기 위해 서버로 이동하지 마세요. <br>if (keyValue==''){ <br> DWRUtil.removeAllRows('showKeyList '); <br>setDropListVisible(false); <br>initKeyListState(); <br>}else{ <br>//유사한 키워드를 얻으려면 ajax를 사용하세요. 자체 조치) <br>useraction.findByLike(keyValue,conformKeyCallback); <br>} <br>} <br>} <br>/* <br>목적: 키워드 콜백 메소드 가져오기<br>*/ <br>함수 conformKeyCallback(keyList) { <br>DWRUtil.removeAllRows('showKeyList'); <br>initKeyListState() <br>if (keyList.length>0){ <br>// 유사 키워드 프롬프트 상자 생성 <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')); ('dropdownlistDiv').style.display='none'; <br>return td; <br>},escapeHtml:false}) <br>setDropListVisible(true); <br> setDropListVisible(false); <br>} <br>} <br>/* <br>용도: 테이블 데이터 표시 처리 방법 <br>*/ <br>var cellFuncs = [ <br>function(data) { return data .username; } <br>]; <br>/* <br>목적: 입력 상자의 커서를 끝으로 이동 <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>function createShowDiv(){ <br>var showDiv = document.createElement("div") <br>showDiv.id = "dropdownlistDiv"; <br>with(showDiv.style){ <br>position = "absolute" <br>//여기서부터 레이어의 절대 위치가 조정됩니다<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>showDiv.onmouseover=function (){mouseLocation=1 ;}; <br>showDiv.onmouseout=function (){mouseLocation=0;}; <br>//오버플로 스크롤 막대 설정<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>목적: 유사 키워드 목록 상자 표시 여부 설정<br>매개변수: isDisplay, true는 visible, false는 보이지 않음을 의미합니다<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>// onload 이벤트에 유사 키워드 목록 상자를 생성하는 방법을 첨부합니다. <br>if (window.addEventListener ){ <br>window.addEventListener( 'load', createShowDiv, false) <br>}else if (window.attachEvent){ <br>window.attachEvent('onload', createShowDiv) <br> ></script> <br> <br> <br>이 js는 검색 효과를 얻기 위해 필요한 jsp에 배치하거나 별도의 js 파일로 저장할 수 있습니다. <br><br><br><br><br>코드 복사</div> <br><br> 코드는 다음과 같습니다. <div class="codetitle"><span> <a style="CURSOR: pointer" data="67005" class="copybut" id="copybut67005" onclick="doCopy('code67005')"><div style="position:absolute;left:190px;top:25px;"> ; <U><input AUTOCOMPLETE="off" </U>onkeydown="oldKeyValue=this.value.trim();setSelectedKey();" </a>onkeyup="getConformKey();" if(this.value=='사람 찾기') this .value='';setDropListVisible(true);" </span>onblur="setDropListVisible(false);" </div>style="width: 300 height: 23 ;z-index: 10;top:0;left: 0;" type="text" name="cond" value="누군가 찾기" id="cond" /> <div class="codebody" id="code67005"><input type="버튼 " class="btn" value="Search" onclick ="findBylike();" /> <br></div> <br><br> <br>useraction.findByLike(문자열 이름);은 쿼리입니다. dao 레이어의 메서드인 <br>은 목록을 반환합니다. 이를 자신만의 구현으로 바꾸세요.</div></a></span></div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
