JS实现百度搜索框
本文实例为大家分享了JS实现百度搜索框的具体代码,供大家参考,具体内容如下
实现原理
向输入框动态输入时关键词,将当前关键词作为问号参数后面的值,因为要跨域使用百度的接口,所以通过JSONP跨域创建Ajax请求。回调函数处理返回值。
尝试研究了一下百度的接口,发现原生的XHR接口参数有点复杂(百度应该是考虑了很多情况)。
找了一个2345导航,在输入框随便输入一个字母s,打开Network,发现它也是向百度的一个地址发送了请求,其中问号后面的‘&wd=s'发送的就是此关键词,'&cb='应该就是回调处理函数,并且它的Type也是script,2345导航应该也是通过JSONP向百度获取数据的。
varscript=document.createElement("script"); script.src= "https://www.baidu.com/su?&wd="+ encodeURI(this.value.trim())+ "&p=3&cb=handleSuggestion"; document.body.appendChild(script);
点开那条请求,果然在里面看到了返回的数据。返回的结果是以一个对象的形式返回的。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;
6.除了点击事件,键盘事件–回车键以及上下键都是进行事件委托进行注册的。
最终能够实现键盘上下键鼠标选择,点击“搜索一下”或回车键实现跳转搜索。
代码:
searchyouwant