百度搜索关键字联想效果

引言

我们在使用百度的时候,每输入一个关键词百度会自动进行关键字补全,

而让用户能更快得到想要的关键词而进行搜索.这次我们来用自制的网页来实现搜索关键字联想效果.

一.布局

我们先要获得百度的logo

任何截图工具都可.

很简单就完成了布局
效果

添加搜索框弹出

模型差不多就这样了

接下来就是重点.

二.脚本

百度的联想是当输入框发生改变的时候才会触发,因此很容易想到一个触发事件--onkeyup当键盘停止输入时触发.

trim()去除了字符前后的空格.
现在只是写了触发事件,我们已经得到了用户输入的数据val.若想要得到百度的数据,我们需要jsonp跨域.
从百度服务器获取信息.在js里面需要用到script标签来获取.我们还需要知道百度服务器地址.
观察在使用百度搜索后的地址栏:

百度主域名后面发现 ?wd=1 的参数,我们把等号后面的值改为2:

发现搜索结果同样也改变了.但是还远远不够.我们需要获得一条完整数据,从Chrome控制台网络看到, su开头的正是百度搜索服务器的地址,但是我们打开

如此居多杂论无章的信息.
这时,我们只需要把wb到cb中间这一段去掉

就能得到从百度服务器发送来的搜索联想结果.

这样就能解析了json,就获取我们想要的信息

把它写入script标签里.

其中,通过script标签动态加载资源,cb后面的值即为函数名.

通过使用该函数名从控制台输出数据,我们看到

这样截取了搜索联想的结果,json里面的数组s即是我们需要的联想词.之后就变得简单起来了

从输入框得到关键词,发送到服务器并接收联想词

基础代码

效果

美化一下,大功告成.

本文完.