首页 > 网络编程 > JavaScript > javascript技巧 > 邮箱输入自动补全

inputSuggest文本框输入时提示、自动完成效果(邮箱输入自动补全插件)

2012-05-19 14:43:18 作者：

inputSuggest在文本框输入字符时提示，类似Windows的“自动完成”功能，当在文本框输入字符时，与此相关的内容会显示在文本框的下边，你可随时使用键盘或鼠标点选那些提示，你就不用输入了

像QQ邮箱提示、百度的搜索框提示、淘宝的商品搜索提示等，现在有不少的网站都有类似效果，以提升用户体验。
　　使用方法：
　　new InputSuggest({
　　input HTMLInputElement 必选
　　data Array ['sina.cn','sina.com','2008.sina.com','vip.sina.com.cn'] 必选
　　containerCls 容器className
　　itemCls 容器子项className
　　activeCls 高亮子项className
　　width 宽度设置此项将覆盖containerCls的width
　　opacity 透明度设置此项将覆盖containerCls的opacity……
在线演示:http://demo.jb51.net/js/2012/inputSuggest/
完整源码下载：https://www.jb51.net/jiaoben/44737.html

<!DOCTYPE HTML> 
<html> 
<head> 
<title>inputSuggest输入字符时提示</title> 
<style type="text/css"> 
body{margin:0;padding:0;} 
input{width:200px;} 
.suggest-container{border:1px solid #C1C1C1;visibility:hidden;} 
.suggest-item{padding:3px 2px;} 
.suggest-active {background:#33CCFF;color:white;padding:3px 2px;} 
</style> 
<script type="text/javascript"> 
function InputSuggest(opt){ 
this.win = null; 
this.doc = null; 
this.container = null; 
this.items = null; 
this.input = opt.input || null; 
this.containerCls = opt.containerCls || 'suggest-container'; 
this.itemCls = opt.itemCls || 'suggest-item'; 
this.activeCls = opt.activeCls || 'suggest-active'; 
this.width = opt.width; 
this.opacity = opt.opacity; 
this.data = opt.data || []; 
this.active = null; 
this.visible = false; 
this.init(); 
} 
InputSuggest.prototype = { 
init: function(){ 
this.win = window; 
this.doc = window.document; 
this.container = this.$C('div'); 
this.attr(this.container, 'class', this.containerCls); 
this.doc.body.appendChild(this.container); 
this.setPos(); 
var _this = this, input = this.input; 
this.on(input,'keyup',function(e){ 
if(input.value==''){ 
_this.hide(); 
}else{ 
_this.onKeyup(e); 
} 
}); 
// blur会在click前发生，这里使用mousedown 
this.on(input,'blur',function(e){ 
_this.hide(); 
}); 
this.onMouseover(); 
this.onMousedown(); 
}, 
$C: function(tag){ 
return this.doc.createElement(tag); 
}, 
getPos: function (el){ 
var pos=[0,0], a=el; 
if(el.getBoundingClientRect){ 
var box = el.getBoundingClientRect(); 
pos=[box.left,box.top]; 
}else{ 
while(a && a.offsetParent){ 
pos[0] += a.offsetLeft; 
pos[1] += a.offsetTop; 
a = a.offsetParent 
} 
} 
return pos; 
}, 
setPos: function(){ 
var input = this.input, 
pos = this.getPos(input), 
brow = this.brow, 
width = this.width, 
opacity = this.opacity, 
container = this.container; 
container.style.cssText = 
'position:absolute;overflow:hidden;left:' 
+ pos[0] + 'px;top:' 
+ (pos[1]+input.offsetHeight) + 'px;width:' 
// IE6/7/8/9/Chrome/Safari input[type=text] border默认为2，Firefox为1，因此取offsetWidth-2保证与FF一致 
+ (brow.firefox ? input.clientWidth : input.offsetWidth-2) + 'px;'; 
if(width){ 
container.style.width = width + 'px'; 
} 
if(opacity){ 
if(this.brow.ie){ 
container.style.filter = 'Alpha(Opacity=' + opacity * 100 + ');'; 
}else{ 
container.style.opacity = (opacity == 1 ? '' : '' + opacity); 
} 
} 
}, 
show: function(){ 
this.container.style.visibility = 'visible'; 
this.visible = true; 
}, 
hide: function(){ 
this.container.style.visibility = 'hidden'; 
this.visible = false; 
}, 
attr: function(el, name, val){ 
if(val === undefined){ 
return el.getAttribute(name); 
}else{ 
el.setAttribute(name,val); 
name=='class' && (el.className = val); 
} 
}, 
on: function(el, type, fn){ 
el.addEventListener ? el.addEventListener(type, fn, false) : el.attachEvent('on' + type, fn); 
}, 
un: function(el, type, fn){ 
el.removeEventListener ? el.removeEventListener(type, fn, false) : el.detachEvent('on' + type, fn); 
}, 
brow: function(ua){ 
return { 
ie: /msie/.test(ua) && !/opera/.test(ua), 
opera: /opera/.test(ua), 
firefox: /firefox/.test(ua) 
}; 
}(navigator.userAgent.toLowerCase()), 
onKeyup: function(e){ 
var container = this.container, input = this.input, iCls = this.itemCls, aCls = this.activeCls; 
if(this.visible){ 
switch(e.keyCode){ 
case 13: // Enter 
if(this.active){ 
input.value = this.active.firstChild.data; 
this.hide(); 
} 
return; 
case 38: // 方向键上 
if(this.active==null){ 
this.active = container.lastChild; 
this.attr(this.active, 'class', aCls); 
input.value = this.active.firstChild.data; 
}else{ 
if(this.active.previousSibling!=null){ 
this.attr(this.active, 'class', iCls); 
this.active = this.active.previousSibling; 
this.attr(this.active, 'class', aCls); 
input.value = this.active.firstChild.data; 
}else{ 
this.attr(this.active, 'class', iCls); 
this.active = null; 
input.focus(); 
input.value = input.getAttribute("curr_val"); 
} 
} 
return; 
case 40: // 方向键下 
if(this.active==null){ 
this.active = container.firstChild; 
this.attr(this.active, 'class', aCls); 
input.value = this.active.firstChild.data; 
}else{ 
if(this.active.nextSibling!=null){ 
this.attr(this.active, 'class', iCls); 
this.active = this.active.nextSibling; 
this.attr(this.active, 'class', aCls); 
input.value = this.active.firstChild.data; 
}else{ 
this.attr(this.active, 'class', iCls); 
this.active = null; 
input.focus(); 
input.value = input.getAttribute("curr_val"); 
} 
} 
return; 
} 
// 烈火網 liehｕｏ．ｎｅt 欢迎复制,拒绝恶意采集 ｖｅｒｙｈｕｏ．ＣＯｍ 
} 
if(e.keyCode==27){ // ESC键 
this.hide(); 
input.value = this.attr(input,'curr_val'); 
return; 
} 
if(input.value.indexOf('@')!=-1){return;} 
this.items = []; 
if(this.attr(input,'curr_val')!=input.value){ 
this.container.innerHTML = ''; 
for(var i=0,len=this.data.length;i<len;i++){ 
var item = this.$C('div'); 
this.attr(item, 'class', this.itemCls); 
item.innerHTML = input.value + '@' + this.data[i]; 
this.items[i] = item; 
this.container.appendChild(item); 
} 
this.attr(input,'curr_val',input.value); 
} 
this.show(); 
}, 
onMouseover: function(){ 
var _this = this, icls = this.itemCls, acls = this.activeCls; 
this.on(this.container,'mouseover',function(e){ 
var target = e.target || e.srcElement; 
if(target.className == icls){ 
if(_this.active){ 
_this.active.className = icls; 
} 
target.className = acls; 
_this.active = target; 
} 
}); 
}, 
onMousedown: function(){ 
var _this = this; 
this.on(this.container,'mousedown',function(e){ 
var target = e.target || e.srcElement; 
_this.input.value = target.innerHTML; 
_this.hide(); 
}); 
} 
} 
</script> 
<script type="text/javascript"> 
window.onload = function(){ 
var sinaSuggest = new InputSuggest({ 
input: document.getElementById('sina'), 
data: ['sina.cn','sina.com','vip.sina.com.cn','2008.sina.com','263.sina.com'] 
}); 
var sohuSuggest = new InputSuggest({ 
width: 300, 
opacity: 0.3, 
input: document.getElementById('sohu'), 
data: ['sohu.com','sogou.com','chinaren.com','vip.sohu.com','sohu.net','2008.sohu.com','sms.sohu.com'] 
}); 
} 
</script> 
</head> 
<body> 
<div style="width:400px;margin:30px auto;text-align:center;"> 
<label>新浪</label> 
<input type="text" id="sina"/> 
<br><br><br><br><br><br><br><br><br><br> 
<label>搜狐</label> 
<input type="text" id="sohu"/> 
</div> 
</body> 
</html>

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

inputSuggest文本框输入时提示、自动完成效果(邮箱输入自动补全插件)

您可能感兴趣的文章: