js_javascriptスキルを使用して入力プロンプト（自動補完）を実装するサンプルコード

コードをコピー コードは次のとおりです: autoComplete &lt ;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> .autoComplete {margin: 8px;position:relative;float:left;} .autoComplete input {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-decoration: none;padding:1px 0 1px 5px;_width:97%;} .autoComplete li a:hover {color:#000;background:#ccc;border:none;} // var getElementsByClassName = function (searchClass, node, tag) {/* 各浏览器の互換クラスのメソッド；(：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{/* サポートされていない要素 ByClassName の浏览器 */ var class = searchClass.split(" "), elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), pattern = [], returnElements = [], current, match; var i =classes.length; while(--i >= 0 ) pattern.push(new RegExp("(^|s)" class[i] "(s|$)")); var j = elements.length; while(--j >= 0){ current = elements[j], match = false; for(var k=0, kl=patterns.length; k match = pattern[ k].test(current.className); if(!match) Break; } if(match) returnElements.push(current); } return returnElements; } }; var addEvent=(function(){/* 用此関数数追加イベント防止イベント覆盖 */ if(document.addEventListener){ return function(type, fn) { this.addEventListener(type, fn, false); }; }else if(document.attachEvent){ return function(type,fn){ this.attachEvent(on type, function () { 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, timer: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=なし; },