本文主要和大家介绍js实现百度搜索功能，代码分为html部分和css折叠样式部分，具体实现代码大家参考下本文，希望能帮助到大家。
今天我们来用JS实现百度搜索功能，下面上代码：
HTML部分：
百度一下,你就知道
@@##@@
CSS层叠样式部分：
body{/*清除浏览器自带样式*/
margin: 0;
padding: 0;
/*background-repeat: no-repeat;*/
min-width: 1200px;
}
.box{/*最大的盒子*/
width: 100%;
height: 100%;
/*background: yellow;*/
/*height: 636px;*/
}
.box_log{/*log盒子*/
width: 100%;
height: 250px;
text-align: center;
}
.box_log_img{
margin:0 auto;
width: 300px;
height: 150px;
}
.box_log img{
width: 300px;
height: 150px;
margin-top: 38px;
margin-bottom: 19px;
}
.box_text{/*text搜索框盒子大小*/
width: 100%;
height: 36px;
}
.box_text_content{
width: 640px;
height: 36px;
margin: 0 auto;
}
#text{ /*input框的样式*/
width: 540px;
height: 36px;
box-sizing: border-box;
margin-top: 3px;
text-indent: 4px;
outline: none;
}
.log_img{/*input框中的小相机*/
position: absolute;
left: 62%;
top: 35.5%;
}
#btn{ /*按钮的样式*/
width: 100px;
height: 36px;
background: #3385FF;
border: 0px;
letter-spacing: 1px;
color: white;
margin-left: -5px;
font-size: 15px;
box-sizing: border-box;
transform: translateY(1.5px);
box-sizing: border-box;
}
#btn:hover{ /*当按钮hover的样式*/
cursor: pointer;
}
#search{ /*搜索框的样式*/
width: 540px;
margin: 0;
padding: 0;
list-style: none;
display: none;
border: 1px solid #E3E5E4;
}
#search li{ /*搜索框li的大小颜色*/
line-height: 36px;
background: white;
}
#search li:hover{ /*当li hover的样式*/
background: #F0F0F0;
}
.li1{ /*li中的值缩进*/
text-indent: 4px;
}JS部分：
var otext = document.getElementById("text"); //获取input框
ose = document.querySelector("#search"); //通过类名选择器 选择到search框
lis = document.getElementsByClassName("li1"); //获取所有的li
otext.onkeyup = function(){ //当在input框中键盘弹起发生事件
ose.style.display = otext.value?"block":"none"; /*三目运算符,如果otext.value的值部位空,则block。*/
var osc = document.createElement("script"); /*创建一个script标签*/
osc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei";
/*srcipt的src值引入百度的url,然后将otext文本框中输入的内容连接到url,在后面在运行自己的方法*/
document.body.appendChild(osc);
/*将创建好的script标签元素放入body中*/
/*input框中按下回车根据input的值跳转页面*/
if(event.keyCode==13){
/*将百度作为连接,传入input的值,并跳入新的页面*/
window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value
}
}
var count = 0;
var search = 0;
var arr = ose.children; /*获取ose下的所有li*/
function houxiaowei(json){
var jsonLength = 0; /*json长度的初始值*/
// console.log(json.s);
for(var x in json.s){ /*将循环的次数变成json的长度*/
jsonLength++;
}
// console.log(jsonLength);
for(var i=0;i 搜索功能的实现源于百度的 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei，这个链接,其中”wd”的值为input框中需要搜索的值,它会返回一个json对象。&cb的值是一个方法或者是函数，它用来将json中的值提取出来放入li中。
相关推荐：
![实例讲解JS如何实现百度搜索功能]()
