JS 实现百度搜索功能

今天我们来用JS实现百度搜索功能，下面上代码：

　　　　HTML部分：

百度一下,你就知道

CSS层叠样式部分：

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部分：

　　搜索功能的实现源于百度的 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei，这个链接,其中”wd”的值为input框中需要搜索的值,它会返回一个json对象。&cb的值是一个方法或者是函数，它用来将json中的值提取出来放入li中。

总结

以上所述是小编给大家介绍的JS 实现百度搜索功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。