讲解如何利用百度接口仿写一个搜索联想词功能
1.首先写一个输入框(html部分十分简单)
<div class="wrapper">
<input type="text " id="btn">
<ul>
</ul>
</div>
2.给它一个样式,可以贴近百度搜索框的样子。
* {
padding: 0;
margin: 0;
}
.wrapper {
position: absolute;
margin-left: -260px;
left: 50%;
top: 30%;
}
#btn {
width: 560px;
padding: 10px 10px;
border: 1px solid rgb(45, 129, 240);
}
3.下面我们来写js部分
我们需要给输入浪添加一个事件—onkeyup
(会在键盘按键被松开时发生。)
步骤一:测试onkeyup事件,以识别我们输入的内容
btn.onkeyup = function () {
var value = this.value;
console.log(value);
}
效果如下:
步骤二:将我们输别的内容,引入联想词条。
btn.onkeyup = function () {
var value = this.value;
// console.log(value);
var oScript = document.createElement('script');
oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=aa'
document.body.appendChild(oScript)
}
function aa(data) {
console.log(data);
}
这里我们所看到地址文件,是这样获取的:
这么长的地址我们并不是全要的,我们只要wd=和cb等于部分 :比如:
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=onkeyup&sugmode=2&json=1&p=3&sid=1443_26909_21081_26350_26925&req=2&bs=onkeyup&pbs=onkeyup&csor=7&pwd=onkeyup&cb=jQuery1102041548312872624815_1533627722834&_=1533627722871
它经过删除后为:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=onkeyup&&cb=jQuery
步骤三:从输出我们可以看到,我们只需要传回来的数据s数组,所以我们对他进行遍历,拼接到<li>
之中,并加他插入<ul>
之中
function aa(data) {
console.log(data);
oUl.style.display = 'block';
var list = data.s;
var str = '';
list.forEach(function (ele, index) {
str += '<li>' + ele + '</li>';
});
oUl.innerHTML = str;
}
这样最基本的联想词就写出来了,但是我们需要对他进行包装。
步骤四:解决输入框无内容时列表消失问题
btn.onkeyup = function () {
var value = this.value;
if (value) {
var oScript = document.createElement('script');
oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=aa'
document.body.appendChild(oScript);
oScript.remove();//大家在之前会发现,随着你输入的东西越多,你创建的script标签就越多,我们在获取到它后直接移除即可。
} else if(value == 0){
oUl.style.display = 'none';
}
}
步骤五:在单一的li列表里,插入a标签,将其引流,可以做到与真实搜索功能一样。
function aa(data) {
oUl.style.display = 'block';
var list = data.s;
var str = '';
if (list.length > 0) {
list.forEach(function (ele, index) {
str += '<li><a href ="https://www.baidu.com/s?wd=' + ele + '">' + ele + '</li>';
})
oUl.innerHTML = str;
}else {
oUl.style.display = 'none';
}
}
千万别忘了,这里我没有讲解css的样式大家可以自由发挥,而且<a>
自带样式,你需要自己调整,消除他的样式,整个布局跟随你的想法走,希望大家可以学会这一小demo。