引言
我们在使用百度的时候,每输入一个关键词百度会自动进行关键字补全,
而让用户能更快得到想要的关键词而进行搜索.这次我们来用自制的网页来实现搜索关键字联想效果.
一.布局
我们先要获得百度的logo
任何截图工具都可.
很简单就完成了布局
效果
添加搜索框弹出
模型差不多就这样了
接下来就是重点.
二.脚本
百度的联想是当输入框发生改变的时候才会触发,因此很容易想到一个触发事件--onkeyup当键盘停止输入时触发.
trim()去除了字符前后的空格.现在只是写了触发事件,我们已经得到了用户输入的数据
val.若想要得到百度的数据,我们需要jsonp跨域.从百度服务器获取信息.在js里面需要用到script标签来获取.我们还需要知道百度服务器地址.
观察在使用百度搜索后的地址栏:
百度主域名后面发现 ?wd=1 的参数,我们把等号后面的值改为2:
发现搜索结果同样也改变了.但是还远远不够.我们需要获得一条完整数据,从Chrome控制台网络看到,
如此居多杂论无章的信息.
这时,我们只需要把wb到cb中间这一段去掉
就能得到从百度服务器发送来的搜索联想结果.
这样就能解析了json,就获取我们想要的信息
把它写入script标签里.
其中,通过script标签动态加载资源,cb后面的值即为函数名.
通过使用该函数名从控制台输出数据,我们看到
这样截取了搜索联想的结果,json里面的数组s即是我们需要的联想词.之后就变得简单起来了
从输入框得到关键词,发送到服务器并接收联想词
基础代码
效果
美化一下,大功告成.
本文完.
