首页 > 网络编程 > JavaScript > javascript技巧 > 自动提示文本框

简单JS自动提示文本框代码

2012-01-16 23:30:18 作者：

为了满足用户的方便，提供良好的自动提示功能就成为定级公司努力方向。废话少说，看例子

本例以颜色为例，为用户提供自动提示，展示效果和运行结果如图：

1、建立框架结构：

 
<body> 
<form method="post" name="myForm1"> 
Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" /> 
</form> 
<div id="popup"> 
<ul id="colors_ul"></ul> 
</div> 
</body> 

2、页面和表单CSS：

复制代码代码如下:

 
<style> 
<!-- 
body{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; padding:0px; margin:5px; form{padding:0px; margin:0px;} 
input{ font-family:Arial, Helvetica, sans-serif; 
font-size:12px; border:1px solid #000000; 
width:200px; padding:1px; margin:0px; #popup{ position:absolute; width:202px; 
color:#004a7e; font-size:12px; 
font-family:Arial, Helvetica, sans-serif; 
left:41px; top:25px; #popup.show{ border:1px solid #004a7e; #popup.hide{ border:none; 
} ul{ 
list-style:none; 
margin:0px; padding:0px; li.mouseOver{ 
background-color:#004a7e; 
color:#FFFFFF; li.mouseOut{ 
background-color:#FFFFFF; 
color:#004a7e; --> 
</style> 

3、实现JS匹配用户输入：

复制代码代码如下:

 
<script language="javascript"> 
var oInputField; //考虑到很多函数中都要使用 
var oPopDiv; //因此采用全局变量的形式 
var oColorsUl; 
var aColors = ["red","green","blue","magenta","yellow",……"ivory","darkmagenta","cornfloewrblue"]; 
aColors.sort(); //按字母排序，使显示结果更友好 
function initVars(){ oInputField = document.forms["myForm1"].colors; 
oPopDiv = document.getElementByIdx_x("popup"); 
oColorsUl = document.getElementByIdx_x("colors_ul"); function clearColors(){ for(var i=oColorsUl.childNodes.length-1;i>=0;i--) 
oColorsUl.removeChild(oColorsUl.childNodes[i]); 
oPopDiv.className = "hide"; function setColors(the_colors){ clearColors(); //每输入一个字母就先清除原先的提示，再继续 
oPopDiv.className = "show"; 
var oLi; 
for(var i=0;i<the_colors.length;i++){ oLi = document.createElement_x("li"); 
oColorsUl.appendChild(oLi); 
oLi.appendChild(document.createTextNode(the_colors[i])); 
oLi. = function(){ 
this.className = "mouseOver"; //鼠标经过时高亮 oLi. = function(){ 
this.className = "mouseOut"; //离开时恢复原样 oLi.onclick = function(){ oInputField.value = this.firstChild.nodeValue; 
clearColors(); //同时清除提示框 } function findColors(){ 
initVars(); //初始化变量 
if(oInputField.value.length > 0){ 
var aResult = new Array(); //用于存放匹配结果 
for(var i=0;i<aColors.length;i++) //从颜色表中找匹配的颜色 if(aColors[i].indexOf(oInputField.value) == 0) 
aResult.push(aColors[i]); //压入结果 
if(aResult.length>0) //如果有匹配的颜色则显示出来 
setColors(aResult); 
else //否则清除，用户多输入一个字母 
clearColors(); //就有可能从有匹配到无，到无的时候需要清除 else 
clearColors(); //无输入时清除提示框（例如用户按del键） 
</script> 

文本框输入提示/自动完成的Js代码
文本框输入自动匹配或提示的功能，输入内容，自动匹配对应数据，可用上下键控制选项、按回车键选择，也可以直接用鼠标选择。代码：建立实例，第一个参数是实例对象的名称，第二个是最多显示的数量。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<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+'</span>';});+'</li>'; 
} 
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> 
</head> 
<body> 
友情提示：文本框屏蔽了回车，因此回车键暂不可用。 
<form name="salefrm" method="post" action="?action=add"> 
<input type="text" id="abc" value="J" size="40"> 
<input type="text" id="we" value="河" size="60"> 
</form> 
<script type="text/javascript"> 
//建立实例，第一个参数是实例对象的名称，第二个是最多显示的数量 
var oo=new mSift('oo',20); 
//数据 
oo.Data=['JavaScript特效','JS效果','Js代码','Java特效','Javascript代码','JS脚本','Js是什么意思','Java','Java游戏']; 
//指定文本框对象建立特效 
oo.Create(document.getElementById('abc')); 
var oxo=new mSift('oxo',20); 
oxo.Data=['河北省','河南省','河源市','河套平原','河北承德']; 
oxo.Create(document.getElementById('we')); 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

简单JS自动提示文本框代码

您可能感兴趣的文章: