仿百度搜索框智能提示实现

纸上得来终觉浅，绝知此事要躬行

找工作难，找实习难，找实习这段时间对自己心里磨砺也是很大，要多写、多看、多温故。前段时间做了到笔试编程题目要求编写类似百度搜索自动完成控件，当时没有写的很完善，花了点时间仔细整理写了下
具体题目要求如图：

具体思路：

1. HTML的oninput事件可以监控input输入，不过题目要求兼容IE8,当时并没有想到，回来查资料有个onproperty事件可以
2. 自动完成的列表项使用fragement文档片段插入，这要比逐个插入效率高很多，visibility设置hidden，当用监控到户输入匹配项时，更改为visible，
3. 提示列表鼠标悬浮变色：css伪类li：hover
4. 点击列表项时，值插入输入框：采用事件委托绑定click事件

代码：

//js部分
var EventUntil={//跨浏览器事件处理
	addhandler:function(element,type,handler){
		if(element.addEventListener){
			element.addEventListener(type,handler,false);
		}else if(element.attachEvent){
			element.attachEvent('on'+type,handler);
		}else{
			element['on'+type]=handler;
		}
	},
	getEvent:function(event){
		return event?event:window.event;
	},
	getTarget:function(event){
		return event.target||event.srcElement;
	},
	preventDefeault:function(event){
		if(preventDefeault){
			event.preventDefeault();
		}else{
			event.returnValue=false;
		}
	},
	removhandler:function(element,type,handler){
		if(event.removeEventListener){
			element.removeEventListener(type,handler,false);
		}else if(element.detachEvent){
			element.detachEvent('on'+type,handler);
		}else{
			element['on'+type]=null;
		}
	},
	stopPropagation:function(event){
		if(event.stopPropagation){
			event.stopPropagation();
		}else{
			event.cancelBubble=true;
		}
	}
};
//具体逻辑代码
var arr=["前端学习路线","前端工程师","前端开发","前端框架"],
	box=document.getElementById("input"),
	dis=document.getElementById("dis");
var el=false;//标识已经插入
EventUntil.addhandler(box,'input',(event)=>{//1.监听键盘输入
	event=EventUntil.getEvent(event);
	console.log(event);
	if(box.value=="前端"){
		console.log("显示候选");
		var frageMent=document.createDocumentFragment(),
			ul=document.getElementById("ul");
		if(el===false){
			for(let i=0;i<arr.length;i++){//2.插入文档
					var texNode=document.createTextNode(arr[i]);
					var li=document.createElement("li");
					li.id=i;
					li.appendChild(texNode);
					frageMent.appendChild(li);
			}
			ul.appendChild(frageMent);						
		}
		el=true;
		ul.onclick=(event)=>{//事件委托  点击插入并且提示消失
				box.value=arr[event.target.id];
				dis.style.visibility="hidden";
			}	
		dis.style.visibility="visible";
	}
});
box.onporpertychange=(event)=>{//1.监听键盘输入（兼容ie8）
	console.log(event);
	if(box.value=="a"){
		console.log("显示候选")
		dis.style.visibility="visible";
	}
}

//html部分
<div class="container">
	<input class="input" type="text" placeholder="百度一下，你就知道" id="input" name="">
	<div id="dis" class="insert">
	<ul id="ul"></ul>
	</div>
</div>

//css部分
.container{
	position: absolute;
         	top: 0; left: 0; bottom: 0; right: 0; 
	margin: auto;
	height: 60px;
	width: 50%			
}
.input{;
	height: 45px;
	width: 100%;
	margin: 0;
	padding: 0;
}
.insert{
	position: absolute;
	top: 50px;
	width: 100.7%;
	margin: 0;
	padding: 0;
	visibility: hidden;
}
ul {
	list-style-type: none;
	border: 1px solid #eee;
	margin: 0;
	padding:0;
}
/*悬浮变色，替代 鼠标事件*/
li:hover{
	background: #eea;
}

最后实现效果

总结：做完感觉需求挺简单的，可是写的时候发现细节还是蛮多，查api测试算下来也花了将近两个小时才完善，汗颜。。而且写的也只是一个很简单的demo，继续努力fighting