js 实现HTML文本框实现下拉提示
???????? 今天在做JS实现ＨＴＭＬ文本框下拉提示的功能??， 在网上找到一段代码并对这段代码增加了Cookie功能。代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>登录---文本框输入提示/自动完成功能</title><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 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;}}}//得到Cookiesfunction getCookie(c_name){if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "=") if (c_start!=-1) { c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)) } } return ""} //设置Cookiesfunction setCookie(c_name,value,expiredays){var exdate=new Date()exdate.setDate(exdate.getDate()+expiredays)document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString())}function checkCookie(){ var username=getCookie('username');var cookievalue=document.getElementById("abc").value; if(username!=null&&username!=""){ if(username.indexOf(cookievalue)<=-1){ username=username+","+cookievalue; setCookie('username',username,3); }}else{setCookie('username',cookievalue,3); }} </script></head><body><form name="salefrm" method="post" action="map.html" onsubmit="checkCookie()">用户名:<inputtype="text" id="abc" name="abc" value="J" size="40" /> <input type="submit"value="提交" /></form><script type="text/javascript"> var uname=getCookie('username'); var arr=uname.split(',');var oo = new mSift('oo', 20);oo.Data =arr;oo.Create(document.getElementById('abc'));</script></body></html>?
以上就是今天研究 HTML 文本框下拉提示的代码，如有问题请留言。。