inputSuggest在文本框输入字符时提示

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

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;

}
		}	
		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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

inputSuggest在文本框输入字符时提示

分类

网站常用

描述

inputSuggest在文本框输入字符时提示，类似Windows的“自动完成”功能，当在文本框输入字符时，与此相关的内容会显示在文本框的下边，你可随时使用键盘或鼠标点选那些提示，你就不用输入了。像QQ邮箱提示、百度的搜索框提示、淘宝的商品...