JS实现仿百度搜索框(实时返回搜索建议?
2018-11-02 16:29:36 张先生的blog 阅读?5073更多
分类专栏?JavaScript
版权声明：本文为博主原创文章，遵?CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明?
本文链接：https://blog.csdn.net/rujin_shi/article/details/83657566
实现原理
向输入框动态输入时关键词，将当前关键词作为问号参数后面的值，因为要跨域使用百度的接口，所以通过 JSONP 跨域创建 Ajax 请求。回调函数处理返回值?
尝试研究了一下百度的接口，发现原生的 XHR 接口参数有点复杂(百度应该是考虑了很多情??
找了一?2345 导航，在输入框随便输入一个字?s，打开 Network,发现它也是向百度的一个地址发送了请求，其中问号后面的?wd=s’发送的就是此关键词，?cb='应该就是回调处理函数，并且它?Type 也是 script?345 导航应该也是通过 JSONP 向百度获取数据的?
var script = document.createElement("script");script.src = "https://www.baidu.com/su?&wd=" + encodeURI(this.value.trim()) + "&p=3&cb=handleSuggestion";document.body.appendChild(script);
?1
?2
?3
?4
?5
?6
点开那条请求，果然在里面看到了返回的数据。返回的结果是以一个对象的形式返回的。q 对应着检索关键词，s 对应着返回的结?数组形式)
后续只需要动态创?li 标签，设置里面的内容，以及注意其他细节问题?
1.使用 flex 布局实现搜索框的水平垂直居中?
?设置?flex 属性之后发现并没有水平垂直居中，当时设置了父盒?height:100%,发现如果?height 设置成具体值就可以实现居中。怀疑是设置?高度无效，查了一下，高度百分比是相对于父盒子的，也就?body。默?html ?body 是没有设?height 的。另外，在布局中对于没有设置宽高的块状盒子，宽度默认是 100%的，高度是由里面的内容自然撑开的?
2.先获取常用的 DOM 节点，避免后续频繁查询操?DOM?
3.为了避免在输入过程中频繁发送请?如果打字速度?,对请求函数做了函数节流，调了一下间?130ms 差不多正好，时间再长就会有卡顿的感觉。使用了 ES6 中的箭头函数避免?setTimeout ?this 指向的问题?
4.在回调函数中?
?每一次执行时首先要清除建议框里的内容，不然上一次的结果还会存在建议框里！截取了结果中的前五?如果把所有结果都展示出来感觉有点丑…百度官方是展示前四个搜索建?
?结果处理完毕后，执行自执行匿名函数，删除创建?script 标签;
5.由于 li 是动态创建的，点?li 标签或者点?搜索一?跳转百度进行搜索时，利用事件冒泡原理，进行事件委托。这里没有考虑兼容性问题：
e = e || window.event; target = e.target || e.srcElement;
?1
?2
6.除了点击事件，键盘事件–回车键以及上下键都是进行事件委托进行注册的?
最终能够实现键盘上下键鼠标选择，点击“搜索一下”或回车键实现跳转搜索?
代码?
search you want