High一下!

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

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

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

具体思路:

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

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
//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";
}
}

1
2
3
4
5
6
7
8
//html部分
<div class="container">
<input class="input" type="text" placeholder="百度一下,你就知道" id="input" name="">
<div id="dis" class="insert">
<ul id="ul"></ul>
</div>
</div>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//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

坚持原创技术分享,您的支持将鼓励我继续创作!

热评文章