js输入框的联想功能

最新推荐文章于 2024-06-08 10:35:46 发布

魔道不误砍柴功

最新推荐文章于 2024-06-08 10:35:46 发布

阅读量7.3k

点赞数 2

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_35971258/article/details/82057373

版权

Web前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

问题：最近最近公司要搞一个弹框页面上显示一个输入框，并且可以联想出具体的地铁站名称，功能类似于百度效果，对于这个功能自己写一套，感觉还是自己技术不够，所以找了很久，终于发现一个可以支持中文联想功能的demo，具体代码如下所示

☛auto.html页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>input自动补全</title>
	<link rel="stylesheet" type="text/css" href="auto.css" />
</head>
<body>
	<div class="wrap">
		<input type="text" id="input" class="auto-inp">
		<div class="auto hidden" id="auto">
			<div class="auto_out">1</div>
			<div class="auto_out">2</div>
		</div>
	</div>
	

	<script src="auto.js"></script>
	<script>
		var array = ['七里香','b0','b12','b22','固戍','b4','b5','b6','如果爱','b7','b8','b2','abd','ab','西乡','accd','abd','qq音乐','b1','cd','ccd','cbcv','小王子','cxf','b0'];
		var autoComplete = new AutoComplete("input","auto",array);
		document.getElementById("input").onkeyup = function(event){
			autoComplete.start(event);
		}
	</script>
</body>
</html>

☛auto.css页面

div,p,h1,h2,h3,h4,h5,h6,ul,li,span,input{
	box-sizing: border-box;
	font: 14px/20px "microsoft yahei";
}
div.wrap{
	width: 240px;
	margin: 20px auto 0 auto;
}
.auto-inp{
	width: 240px;
	height: 36px;
	padding-left: .5em;
	border-radius: 2px;
	border: 1px solid #dedede;
	color: #666;
	outline: none;
}
.auto{
	width: 240px;
	border: 1px solid #dedede;
	border-top: none;
	position: absolute;
}
.auto_out{
	width: 238px;
	height: 36px;
	line-height: 36px;
	padding-left: .5em;
	color: #000;
	background: #fff;
	overflow: hidden;
	white-space: nowrap;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
}
.auto_out.on{
	background: #eee;
	cursor: pointer;
}
.hidden{
	display: none;
}

☛auto.js页面

// 数组去重
Array.prototype.unique = function(){
	this.sort();
	var res = [];
	var json = {};
	for (var i = 0; i < this.length; i++) {
		if(!json[this[i]]){
			res.push(this[i]);
			json[this[i]] = 1;
		}
	}
	return res;
}

// 对样式操作
var setClass = {
	hasClass: function(elements,cName){	// 判断是否含有某个class
		if(elements.className.match(new RegExp( "(\\s|^)" + cName + "(\\s|$)") ))
			return true;
		else
			return false;
	},
	addClass: function(elements,cName){	// 添加class
		if( !this.hasClass( elements,cName ) ){ 
			elements.className += " " + cName; 
		};
	},
	removeClass: function(elements,cName){	// 移除某个class
		if( this.hasClass( elements,cName ) ){ 
			elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); 
		}
	}
}

var Bind = function(This){
	return function(){
		This.init();
	}
}

function AutoComplete(input,auto,arr) {
	this.obj = document.getElementById(input);
	this.autoObj = document.getElementById(auto);
	this.search_value = "";	//当前的搜索输入值
	this.index = -1;		//当前选中的DIV的索引
	this.value_arr = arr;	//数据库中供检索的值 不包含重复值
}
AutoComplete.prototype = {
	// 初始化
	init: function(){
		var This = this;
		setClass.removeClass(This.autoObj,"hidden");
		this.autoObj.style.left = this.obj.offsetLeft + "px";
		this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";
	},
	//删除自动完成需要的所有DIV
	deleteDIV: function(){
		while(this.autoObj.hasChildNodes()){
			this.autoObj.removeChild(this.autoObj.firstChild);
		}
		setClass.addClass(this.autoObj,"hidden");
	},
	autoOnmouseover: function(index){
		if(index != this.index){
			setClass.addClass(this.autoObj.children[index],"on");
			setClass.removeClass(this.autoObj.children[this.index],"on");
			this.index = index;
		}
	},
	setValue: function(This){
		return function(){
			This.obj.value = this.seq;
			setClass.addClass(This.autoObj,"hidden");
		}
	},
	// 响应键盘
	pressKey: function(event){
		var code = event.keyCode;
		var length = this.autoObj.children.length;
		if(code == 38){		//↑
			setClass.removeClass(this.autoObj.children[this.index],"on");
			this.index--;
			if(this.index < 0){
				this.index = length - 1;
			}
			setClass.addClass(this.autoObj.children[this.index],"on");
			this.obj.value = this.autoObj.children[this.index].seq;
		}else if(code == 40){	//↓
			setClass.removeClass(this.autoObj.children[this.index],"on");
			this.index++;
			if(this.index > length-1){
				this.index = 0;
			}
			setClass.addClass(this.autoObj.children[this.index],"on");
			this.obj.value = this.autoObj.children[this.index].seq;
		}else{			//回车
			this.obj.value = this.autoObj.children[this.index].seq;
			setClass.addClass(this.autoObj,"hidden");
			this.index = -1;
		}
	},
	// 程序入口
	start: function(event){
		event = event || window.event;
		var code = event.keyCode;
		var This = this;
		if(code != 13 && code != 38 && code != 40){
			this.init();
			this.deleteDIV();
			this.search_value = this.obj.value;
			var valueArr = this.value_arr.unique();
			//去掉前后空格不能为空
			if(this.obj.value.replace(/(^\s*)|(\s*$)/g,"") == ""){ return;}
			//判断数组中是否含有输入的关键字
			try{
				var reg = new RegExp("("+ this.obj.value +")","i");	//输入"aaa" 则 reg = /(aaa)/i
			}catch(e){
				alert(e.message); 
			}
			var div_index = 0;	//记录匹配索引个数
			for (var i = 0; i < valueArr.length; i++) {
				if(reg.test(valueArr[i])){
					var div = document.createElement("div");
					div.className = "auto_out";
					div.seq = valueArr[i];
					div.index = div_index;
					div.innerHTML = valueArr[i].replace(reg,"<strong>$1</strong>");
					this.autoObj.appendChild(div);
					setClass.removeClass(this.autoObj,"hidden");
					div_index++;
					if(div_index == 1) {
						setClass.addClass(this.autoObj.firstChild,"on");
						this.index = 0;
					}
					div.onmouseover = function(){
						This.autoOnmouseover(this.index);
					}
					div.onclick = this.setValue(This);
				}
			}
		}else{
			this.pressKey(event);
		}
		window.onresize = Bind(This);
	}
}

下载源码https://pan.baidu.com/s/1gfLU4Mn

魔道不误砍柴功

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
6
评论
js输入框的联想功能

问题：最近最近公司要搞一个弹框页面上显示一个输入框，并且可以联想出具体的地铁站名称，功能类似于百度效果，对于这个功能自己写一套，感觉还是自己技术不够，所以找了很久，终于发现一个可以支持中文联想功能的demo，具体代码如下所示☛auto.html页面&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta ...
复制链接

扫一扫