百度搜索框怎么用HTML做,百度搜索框的基本实现

百度首页搜索框是这样的一个基本形式，我们搜索框里输入字符时就能显示出一些有关的联想词，如图2所示

图1.png

图2.png

那么今天我们来写一下这种效果，不算一模一样，大概相同吧，哈哈。

第一步：在html文档中搭建出类似的框架，给出类似的样式，基本页面布局实现大致一样，代码如下：

百度搜索

*{

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);

}

百度一下

效果如下图：

图片.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就行

好了，只需了解这么多就差不多了。

下面在标签后面插入下面代码，就能得到我们想要的搜索框了

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链接到的地址"+el+"";

oul.appendChild(lis);

})

}

最后附上我代码里面用到的图片

baidu.png

OK！！！