<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>百度搜索</title>
<script src="js/jquery-3.0.0.js"></script>
<script>
$(function(){
$("#search").on("keyup",function(){
var value=$(this).val();
$.ajax({
method:"post",
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=getdata&wd="+value,
dataType:"jsonp",
// jsonpCallback:"getdata",
success:function(data){
$(".block").find("ul").remove();
var text=data.s;
//动态创建dom元素
var ul=$("<ul></ul>");
ul.addClass("ul_pos");
for(var i=0;i<text.length;i++){
var li_child=$("<li></li>");
li_child.bind("click",function(){
var text_val=$(this).text();
$("#search").html(text_val);
$(this).parent("ul").remove();
});
li_child.html(text[i]);
var a=$("<a href='https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd="+text[i]+"'></a>");
a.append(li_child);
ul.append(a);
}
$(".block").append(ul);
}
})
$(".baidu").click(function (){
var txt=$("#search").val();
/* window location history*/
location.href="https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd="+txt;
});
})
})
</script>
<style>
*{
margin: 0;
padding: 0;
}
.block{
position: relative;
border: 1px solid black;
width: 600px;
height: 50px;
margin: 10% auto;
}
#search{
width: 470px;
height: 50px;
line-height: 50px;
border-style: none;
outline: none;
padding-left: 10px;
float: left;
font-size: 20px;
}
.baidu{
display: inline-block;
float: left;
height: 50px;
width: 120px;
text-align: center;
line-height: 50px;
background-color: #2c99ff;
color: white;
cursor: pointer;
}
.baidu:hover{
background-color: blue;
}
.ul_pos{
position: absolute;
top: 50px;
left: -1px;
width: 480px;
border: 1px solid black;
}
.ul_pos li{
list-style: none;
padding-left: 15px;
line-height: 30px;
font-size: 16px;
}
.ul_pos>a{
text-decoration: none;
color: black;
font-weight: bold;
}
.ul_pos li:hover{
background-color: #c0c0c0;
}
</style>
</head>
<body>
<div class="block">
<input type="text" id="search"/>
<span class="baidu">百度一下</span>
</div>
</body>
</html>