js_javascript 기술을 사용하여 입력 프롬프트(자동 완성)를 구현하는 예제 코드

코드 복사 코드는 다음과 같습니다. autoComplete &lt ;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> .autoComplete {margin: 8px;position:relative;float:left;} .autoComplete 입력 {width:200px;height:25px;margin:0;padding:0;line-height:25px;} .autoComplete ul {z- 색인:-12;패딩:0px;여백:0px;테두리:1px #333 단색;너비:200px;배경:흰색;디스플레이:없음;위치:절대;왼쪽:0;상단:28px;*여백-왼쪽:9px ;*margin-top:2px;margin-top:1px;} .autoComplete li {list-style:none;} .autoComplete li a {display:block;color:#000;text-꾸밈: none;padding:1px 0 1px 5px;_width:97%;} .autoComplete li a:hover {color:#000;Background:#ccc;border:none;} // var getElementsByClassName = function (searchClass, node, tag) {/* 兼容各浏览器的选择class적 방법 ;(：http://www.jb51.net，想了解更多请看这个地址) */ 노드 = 노드 || 문서, 태그 = 태그 ? tag.toUpperCase() : "*"; if(document.getElementsByClassName){/* 支持getElementsByClassName의 浏览器 */ var temp = node.getElementsByClassName(searchClass); if(tag== "*"){ return temp; } else { var ret = new Array(); for(var i=0; i 만약 (temp[i].nodeName==tag) ret.push(temp[i]); return ret; } }else{/*器 */ var 클래스 = searchClass.split(" "), 요소 = (태그 === "*" && node.all)? node.all : node.getElementsByTagName(tag), 패턴 = [], returnElements = [], current, match; var i =classes.length; while(--i >= 0 ) 패턴.push(new RegExp("(^|s)" 클래스[i] "(s|$)")); var j = elements.length; while(--j >= 0){ 현재 = 요소[j], 일치 = false; for(var k=0, kl=patterns.length; k 일치 = 패턴[ k].test(current.className); if(!match) break; } if(match) returnElements.push(current); } return returnElements ; } }; var addEvent=(function(){/* 用此函数添加事件防止事件覆盖 */ if(document.addEventListener){ 반환 함수(유형, fn) { this.addEventListener(type, fn, false) }; }else if(document.attachEvent){ return function(type,fn){ this.attachEvent(유형, 함수 () { return fn.call(this, window.event);/* 兼容IE */ }); }; } })(); ;(function(window){ /* 플러그인 시작*/ var autoComplete=function(o){ var handler=(function(){ var handler =function(e,o){ return new handler.prototype.init(e,o); };/* 여러 dom을 선택할 때 쉽게 사용할 수 있도록 선택한 dom마다 해당 객체를 생성합니다. */ handler.prototype={ e:null, o:null, 타이머:null, show:0, input:null, popup:null, init:function(e,o){/ * 설정 초기 객체*/ this.e=e, this.o=o, this.input=this.e.getElementsByTagName(this.o.input)[0], this.popup =this .e.getElementsByTagName(this.o.popup)[0], this.initEvent();/* 다양한 이벤트 초기화*/ }, :match(quickExpr,value, source){/ * 프롬프트 생성*/ var li = null; null ){ li = document.createElement(li); li.innerHTML = source[i] ; This.popup .appendChild(li); This.popup.style.display=block; else this.popup.style.display= 없음; },

js_javascript 기술을 사용하여 입력 프롬프트(자동 완성)를 구현하는 예제 코드

관련 기사