이 예에서는 색상을 예로 들어 사용자에게 자동 프롬프트를 제공합니다. 디스플레이 효과 및 실행 결과는 다음과 같습니다. 1. 프레임 구조 설정: 코드 복사 코드는 다음과 같습니다. 🎜> 색상: /ul> 2. 페이지 및 양식 CSS: 코드 복사 코드는 다음과 같습니다: </span><!-- </div>body{ <div class="codebody" id="code17003">font-family: Arial, Helvetica, sans-serif; <BR>font-size:12px; margin:5px; form{padding:0px; margin:0px;} <BR>input{ 글꼴 계열:Arial, Helvetica -serif; 크기:12px; 테두리: 1px #000000; 너비: 200px; 여백: 0px; <BR>색상: #004a7e; 글꼴 크기:12px ; <BR>글꼴-가족:Arial, Helvetica, sans-serif; 왼쪽:41px; #popup.show{ 테두리:1px 솔리드 #popup. hide{ border:none >} ul{ <BR>list-style:none; <BR>padding:0px; li.mouseOver{ <BR>배경색:#004a7e; :#FFFFFF; li.mouseOut{ <BR>배경색:#FFFFFF; <BR>색상:#004a7e --> <br><br> <br>3. JS 매칭 사용자 입력: <br> <br><br><br><br>코드 복사<br><br><br> 코드는 다음과 같습니다:</div> <br> <br><스크립트 언어 ="javascript"> var oInputField ; //<div class="codetitle">var oPopDiv가 많은 함수에서 사용된다는 점을 고려하여 //전역 변수 형식을 사용합니다. <span>var oColorsUl; "red","green","blue", "magenta","yellow",..."ivory","darkmagenta","cornfloewrblue"]; <a style="CURSOR: pointer" data="56524" class="copybut" id="copybut56524" onclick="doCopy('code56524')">aColors.sort(); 표시 결과를 더 친숙하게 만듭니다<u>function initVars() { oInputField = document.forms["myForm1"].colors; </u>oPopDiv = document.getElementByIdx_x("popup") </a>oColorsUl = document.getElementByIdx_x( "colors_ul"); functionclearColors(){ for(var i=oColorsUl.childNodes.length-1;i>=0;i--) </span>oColorsUl.removeChild(oColorsUl.childNodes[i]) </div> oPopDiv.className = "hide"; function setColors(the_colors) {clearColors(); //계속하기 전에 문자를 입력할 때마다 원래 프롬프트를 지웁니다. <div class="codebody" id="code56524">oPopDiv.className = "show" var oLi; <br>for(var i=0;i<the_colors .length;i ){ oLi = document.createElement_x("li") <BR>oColorsUl.appendChild(oLi) <BR>oLi.appendChild(document.createTextNode (the_colors[i])); <BR>oLi.= function(){ <BR>this.className = "mouseOver"; //마우스가 지나갈 때 oLi를 강조 표시합니다. = function(){ <BR>this.className = "mouseOut"; //종료시 원래 상태로 복원 oLi.onclick = function(){ oInputField.value = this.firstChild.nodeValue <BR>clearColors(); //동시에 프롬프트 상자 지우기} function findColors(){ <BR>initVars(); //변수 초기화<BR>if( oInputField.value.length > 0){ <br>var aResult = new Array() //일치하는 결과를 저장하는 데 사용됩니다. 🎜>for(var i=0;i<aColors.length;i ) //색상에서 테이블에서 일치하는 색상을 찾습니다. if(aColors[i].indexOf(oInputField.value) == 0) <BR>aResult. push(aColors[i]); //결과 푸시<BR>if(aResult.length> 0) //일치하는 색상이 있으면 표시됩니다. <br>setColors(aResult) <br>else / /그렇지 않으면 사용자가 문자를 하나 더 입력합니다. <br>clearColors(); //일치 항목을 없음으로 변경할 수 있습니다. 일치 항목이 없으면 다른 항목을 지워야 합니다. <br>clearColors(); 입력이 없을 때 프롬프트 상자(예: 사용자가 del 키를 누름) <br></script> <br><br> <br><strong>文本框输入提示/自动完成的Js代码 <br></strong>文本框输入自动匹配或提示的功能，输入内容，自动匹配对应数据，可用上下键控制选项、按回车键选择，也可以直接用鼠标选择。代码：建立实例，第一个参数是实例对象的名称，第二个是最多显示的数量。 <br><div class="htmlarea"><textarea id="runcode47315"> <title>文本框输入提示/自动完成功能</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <script type="text/javascript"> function mSift_SeekTp(oObj,nDire){if(oObj.getBoundingClientRect&&!document.all){var oDc=document.documentElement;switch(nDire){case 0:return oObj.getBoundingClientRect().top+oDc.scrollTop;case 1:return oObj.getBoundingClientRect().right+oDc.scrollLeft;case 2:return oObj.getBoundingClientRect().bottom+oDc.scrollTop;case 3:return oObj.getBoundingClientRect().left+oDc.scrollLeft;}}else{if(nDire==1||nDire==3){var nPosition=oObj.offsetLeft;}else{var nPosition=oObj.offsetTop;}if(arguments[arguments.length-1]!=0){if(nDire==1){nPosition+=oObj.offsetWidth;}else if(nDire==2){nPosition+=oObj.offsetHeight;}}if(oObj.offsetParent!=null){nPosition+=mSift_SeekTp(oObj.offsetParent,nDire,0);}return nPosition;}} function mSift(cVarName,nMax){this.oo=cVarName;this.Max=nMax;} mSift.prototype={ Varsion:'v2010.10.29 by AngusYoung | mrxcool.com', Target:Object, TgList:Object, Listeners:null, SelIndex:0, Data:[], ReData:[], Create:function(oObj){ var _this=this; var oUL=document.createElement('ul'); oUL.style.display='none'; oObj.parentNode.insertBefore(oUL,oObj); _this.TgList=oUL; oObj.onkeydown=oObj.onclick=function(e){_this.Listen(this,e);}; oObj.onblur=function(){setTimeout(function(){_this.Clear();},100);}; }, Complete:function(){}, Select:function(){ var _this=this; if(_this.ReData.length>0){ _this.Target.value=_this.ReData[_this.SelIndex].replace(/\*/g,'*').replace(/\|/g,'|'); _this.Clear(); } setTimeout(function(){_this.Target.focus();},10); _this.Complete(); }, Listen:function(oObj){ var _this=this; _this.Target=oObj; var e=arguments[arguments.length-1]; var ev=window.event||e; switch(ev.keyCode){ case 9://TAB return; case 13://ENTER _this.Target.blur(); _this.Select(); return; case 38://UP _this.SelIndex=_this.SelIndex>0?_this.SelIndex-1:_this.ReData.length-1; break; case 40://DOWN _this.SelIndex=_this.SelIndex<_this.ReData.length-1?_this.SelIndex+1:0; break; default: _this.SelIndex=0; } if(_this.Listeners){clearInterval(_this.Listeners);} _this.Listeners=setInterval(function(){ _this.Get(); },10); }, Get:function(){ var _this=this; if(_this.Target.value==''){_this.Clear();return;} if(_this.Listeners){clearInterval(_this.Listeners);}; _this.ReData=[]; var cResult=''; for(var i=0;i<_this.Data.length;i++){ if(_this.Data[i].toLowerCase().indexOf(_this.Target.value.toLowerCase())>=0){ _this.ReData.push(_this.Data[i]); if(_this.ReData.length==_this.Max){break;} } } var cRegPattern=_this.Target.value.replace(/\*/g,'*'); cRegPattern=cRegPattern.replace(/\|/g,'|'); cRegPattern=cRegPattern.replace(/\+/g,'\\+'); cRegPattern=cRegPattern.replace(/\./g,'\\.'); cRegPattern=cRegPattern.replace(/\?/g,'\\?'); cRegPattern=cRegPattern.replace(/\^/g,'\\^'); cRegPattern=cRegPattern.replace(/\$/g,'\\$'); cRegPattern=cRegPattern.replace(/\(/g,'\\('); cRegPattern=cRegPattern.replace(/\)/g,'\\)'); cRegPattern=cRegPattern.replace(/\[/g,'\\['); cRegPattern=cRegPattern.replace(/\]/g,'\\]'); cRegPattern=cRegPattern.replace(/\\/g,'\\\\'); var cRegEx=new RegExp(cRegPattern,'i'); for(var i=0;i<_this.ReData.length;i++){ if(_this.Target.value.indexOf('*')>=0){ _this.ReData[i]=_this.ReData[i].replace(/\*/g,'*'); } if(_this.Target.value.indexOf('|')>=0){ _this.ReData[i]=_this.ReData[i].replace(/\|/g,'|'); } cResult+='<li style="padding:0 5px;line-height:20px;cursor:default;" onmouseover="'+ _this.oo+'.ChangeOn(this);'+_this.oo+'.SelIndex='+i+';" onmousedown="'+_this.oo+'.Select();">' +_this.ReData[i].replace(cRegEx,function(s){return '<span style="background:#ff9;font-weight:bold;font-style:normal;color:#e60;">'+s+'';});+''; } if(cResult==''){_this.Clear();} else{ _this.TgList.innerHTML=cResult; _this.TgList.style.cssText='display:block;position:absolute;background:#fff;border:#090 solid 1px;margin:-1px 0 0;padding: 5px;list-style:none;font-size:12px;'; _this.TgList.style.top=mSift_SeekTp(_this.Target,2)+'px'; _this.TgList.style.left=mSift_SeekTp(_this.Target,3)+'px'; _this.TgList.style.width=_this.Target.offsetWidth-12+'px'; } var oLi=_this.TgList.getElementsByTagName('li'); if(oLi.length>0){ oLi[_this.SelIndex].style.cssText='background:#36c;padding:0 5px;line-height:20px;cursor:default;color:#fff;'; } }, ChangeOn:function(oObj){ var oLi=this.TgList.getElementsByTagName('li'); for(var i=0;i<oLi.length;i++) { oLi[i].style.cssText='padding:0 5px;line-height:20px;cursor:default;'; } oObj.style.cssText='background:#36c;padding:0 5px;line-height:20px;cursor:default;color:#fff;'; }, Clear:function(){ var _this=this; if(_this.TgList){ _this.TgList.style.display='none'; _this.ReData=[]; _this.SelIndex=0; } } } </script> </textarea></div> </div>
