js实现HTML⽂本框实现下拉提⽰
今天在做JS实现ＨＴＭＬ⽂本框下拉提⽰的功能  ， 在⽹上到⼀段代码并对这段代码增加了Cookie功能。代码如下：　
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/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 (BoundingClientRect && !document.all) {
var oDc = document.documentElement;
switch (nDire) {
case 0:
BoundingClientRect().top + oDc.scrollTop;
case 1:
BoundingClientRect().right + oDc.scrollLeft;
case 2:
BoundingClientRect().bottom + oDc.scrollTop;
case 3:
BoundingClientRect().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) {
< = cVarName;
this.Max = nMax;
}
mSift.prototype = {
Varsion : 'v2010.10.29 by AngusYoung | mrxcool',
Target : Object,
TgList : Object,
Listeners : null,
SelIndex : 0,
Data : [],
ReData : [],
Create : function(oObj) {
var _this = this;
var oUL = ateElement('ul');
oUL.style.display = 'none';
oObj.parentNode.insertBefore(oUL, oObj);
_this.TgList = oUL;
_this.TgList = oUL;
_this.Listen(this, e);
};
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 = '';
var cResult = '';
for ( var i = 0; i < _this.Data.length; i++) {
if (_this.Data[i].toLowerCase().indexOf(
_this.LowerCase()) >= 0) {
_this.ReData.push(_this.Data[i]);
if (_this.ReData.length == _this.Max) {
break;
}
}
}
var cRegPattern = _this.place(/\*/g, '*');
cRegPattern = place(/\|/g, '|');
cRegPattern = place(/\+/g, '\\+');
cRegPattern = place(/\./g, '\\.');
cRegPattern = place(/\?/g, '\\?');
cRegPattern = place(/\^/g, '\\^');
cRegPattern = place(/\$/g, '\\$');
cRegPattern = place(/\(/g, '\\(');
cRegPattern = place(/\)/g, '\\)');
cRegPattern = place(/\[/g, '\\[');
cRegPattern = place(/\]/g, '\\]');
cRegPattern = place(/\\/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 οnmοuseοver="'
+ _
+ '.ChangeOn(this);'
+ _
+ '.SelIndex='
+ i
+ ';" οnmοusedοwn="'
+ _
+ '.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.p = 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 = _ElementsByTagName('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 = ElementsByTagName('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() {
Clear : function() {
var _this = this;
if (_this.TgList) {
_this.TgList.style.display = 'none';
_this.ReData = [];
_this.SelIndex = 0;
}
}
}
//得到Cookies
function getCookie(c_name)
{
if (kie.length>0)
{
c_kie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_kie.indexOf(";",c_start)
if (c_end==-1) c_kie.length
return kie.substring(c_start,c_end))
}
}
return ""
}
//设置Cookies
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.Date()+expiredays)
if(username!=null&&username!=""){
if(username.indexOf(cookievalue)<=-1){
username=username+","+cookievalue;
setCookie('username',username,3);
}
html内容文本框}else{
setCookie('username',cookievalue,3);
}
}
</script>
</head>
<body>
<form name="salefrm" method="post" action="map.html" οnsubmit="checkCookie()">⽤户名:<input  type="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.ElementById('abc'));
</script>
</body>
</html>
　以上就是今天研究　HTML ⽂本框下拉提⽰的代码，如有问题请留⾔。。            　

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。