百度首页搜索框是这样的一个基本形式，我们搜索框里输入字符时就能显示出一些有关的联想词，如图2所示
图1.png
图2.png
那么今天我们来写一下这种效果，不算一模一样，大概相同吧，哈哈。
第一步：在html文档中搭建出类似的框架，给出类似的样式，基本页面布局实现大致一样，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度搜索</title>
<style>
*{
margin: 0;
padding: 0;
}
.show{
margin: 10px auto;
width: 340px;
}
#text{
/*去掉默认样式*/
appearance:none;
width:250px;
height: 20px;
outline:0;
}
#go{
display: inline-block;
text-decoration: none;
text-align: center;
line-height: 25px;
border: 0;
width:70px;
height: 25px;
font-size: 14px;
color: white;
background-color: rgb(33,134,250);
}
.search{
width:252px;
border:1px solid #ccc;
display: none;
}
ul{
list-style: none;
}
li{
line-height: 20px;
font-size: 14px;
cursor:pointer;
box-sizing: border-box;
padding:0 5px;
}
li:hover{
background-color: rgb(230,230,230);
}
</style>
</head>
<body>
<center><img src="baidu.png" alt=""></center>
<div class="show">
<input type="text" id="text">
<a href="" id="go">百度一下</a>
<div class="search">
<ul>
</ul>
</div>
</div>
</body>
</html>
效果如下图：
图片.png
接下来是我们必须要知道的一些事：
1、在哪输入
2、什么情况下会出现联想词列表，什么情况下消失
3、这些联想词的数据来自哪里
答案是：
1、在输入框中输入内容
2、如果输入框中为空，就不会出现联想列表；如果输入框中有内容，那么让联想列表出现
3、关于这些联想词的数据，我们可以借用百度接口来获取，百度通过url接口将数据传出，url就是指http://www.baiidu.com地址，我们才可以通过这个链接访问服务器的资源，浏览器只是这些资源的载体，那么这里就涉及到跨域请求，在我们所学的内容里，可以想到script标签的src属性可以引入外部文件，比如引入JQ插件，因此可以实现跨域请求。
再接着，我们来了解一下百度链接地址
先在百度搜索框里输入任意字符，按回车键确认搜索
图片.png
这里我标记了四个地方，首先看地址栏，s?前面是资源占位符，称为地址；？后面是参数，我们向百度申请的资源不同，参数就不同，在这里我们搜索的是1，所以wd属性为1.
再看Network下面的标记，这个请求就是我们发送的，然后它通过script标签访问到后面的js脚本
图片.png
我们右击上图 划线处，拷贝链接到新窗口打开
图片.png
我们看到一串很长的链接是吧，看不懂好像，哈哈，显示内容里面好像有我们想要请求的数据，我们再将它简化一下，删除我上图划线的部分，得到下图：
图片.png
继续简化，删除我上图划线的部分，得到下图：
图片.png
再观察这个图片，我划线的两个部分是一样的，其实它也是可以替换的，我们将链接中划线部分替换为任意一个名字 lyl ,得到下图;
图片.png
替换得没问题，如果我们不看红色框里面的内容，是不是看起来想一个函数执行 lyl()
所以它的返回值类似是一个函数执行，函数里面（括号里面）的参数是是json键值对，所以这些键值对可以当做参数传入。
说到这里，我们还必须知道一个事，通常用户都会在百度搜索框里输入向搜索的内容，还有另外一方式，如下图：
图片.png
只需在http://www.baidu.com后面加上/s?wd=xxxx就行
好了，只需了解这么多就差不多了。
下面在</dody>标签后面插入下面代码，就能得到我们想要的搜索框了
<script>
var text = document.getElementById('text');
var search = document.getElementsByClassName('search')[0];
var oul = document.querySelector(".search ul");
var go =document.getElementById("go");
// 每次键盘抬起
text.onkeyup = function(){
// 获取输入框里面的内容
var val = this.value;
// 如果输入框中不为空，就让联想列表出现，否则消失
search.style.display=this.value!=""?"block":"none";
// 每次松开键盘，都要通过script标签向百度接口获取数据
// 所以每次松开键盘都要生成一个script标签，通过src属性来跨域请求
var sc = document.createElement("script");
sc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+ val+"&cb=lyl";
document.body.appendChild(sc);
}
// data参数就是链接返回的json数据，data是一个对象,data.s就是我们找的联想词
function lyl(data){
// console.log(data);
oul.innerHTML="";//清空
// 数组遍历forEach,里面有回调函数
data.s.forEach(function(el){
// console.log(el);
// 生成li
var lis = document.createElement("li");
// li链接到的地址<a href='https://www.baidu.com/s?wd=el
lis.innerHTML = "<a href='https://www.baidu.com/s?wd="+el+"'>"+el+"</a>";
oul.appendChild(lis);
})
}
</script>
最后附上我代码里面用到的图片
baidu.png
OK！！！
网友评论