百度联想
本人git博客地址：博健的github博客地址
Ps：是一些阅读大牛文章后的总结和分享，欢迎大家查看～
新年分隔符--------------------
讲解如何利用百度接口仿写一个搜索联想词功能
1.首先写一个输入框（html部分十分简单）
<p class="wrAPPer">
<input type="text " id="btn">
<ul>
</ul>
</p>
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。
相关阅读
一、基本概念 1.二叉排序树 二叉排序树（Binary sort tree，BST），又称为二叉查找树，或者是一棵空树；或者是具有下列性质的二叉树： (1)若
第一步，注册一个有趣味的微博名字，如减肥瘦身百科，护肤美妆百科，美食营养百科。这样做的目的是便于搜索，目前也是女生关注最多的话题。
目录 题目描述 输入/输出描述 解决思路 代码 代码走读 传送门 测试用例 1. 输入的数据都是整型 2. 输入的数据存在非法字符 题
写一个简易的socks5代理服务器，负责转发网络数据包，要能够使用它来上网。 SOCKS5 是一个代理协议，它在使用TCP/IP协议通讯的前端机器
这是一个非常有意思的类，看下面的代码：CountDownLatch countDownLatch = new CountDownLatch(1); new Thread(new Runnable() {