<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
body{
background-color: #333;
}
.bg-div{
position: relative;
background-image: url(river.jpg);
width: 1228px;
height: 690px;
margin: 0px auto;
}
.logo{
background-image: url(logo.png);
width: 107px;
height: 53px;
float: left;
margin: -8px 18px 0 0;/*margin为负值反向移动*/
}
.search-form{
float: left;
background-color: #fff;
padding:4px;
}
/*border:0;去掉按钮默认边框*/
.search-btn{
border: 0;
background-image:url(search-button.png) ;
width: 29px;
height: 29px;
cursor:pointer;
}
.search-text{
border: 0;
width: 300px;
height: 25px;
line-height: 25px;
outline: none;/*?outline(轮廓)是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。*/
}
.search-box{
position:absolute;
top: 200px;
left: 300px;
}
.suggest{
width: 343px;
background-color: #fff;
border: 1px solid #999999;
}
.suggest ul{
list-style: none;
margin: 0;
padding: 0;
}
.suggest ul li{
padding: 3px;
font-size: 14px;
line-height: 25px;
cursor: pointer;
}
.suggest ul li:hover{
text-decoration: underline;
background-color: #e5e5e5;
}
</style>
<script src="jquery/jquery-3.3.1.js"></script>
</head>
<body>
<div class="bg-div">
<div class="search-box">
<div class="logo"></div>
<form class="search-form" action="https://cn.bing.com/search" target="_blank" id="search-form" method="get">
<input type="text" class="search-text" id="search_input" autocomplete="off"/>
<!--这里设置value=""是为了去掉submit默认生成的value文字-->
<input type="submit" class="search-btn" value=""/>
</form>
</div>
<div class="suggest" id="search-suggest" style="display: none;">
<ul id="search-result">
<li>C罗</li>
<li>梅西</li>
</ul>
</div>
</div>
<script>
$("#search_input").on('keyup',function(event){
var searchText = $("#search_input").val();
$.ajax({
type:'get',
url:'http://api.bing.com/qsonhs.aspx?type=cb&q='+searchText,
async:true,
dataType:"jsonp",
jsonp:'cb',
success:function(data){
var data = data.AS.Results[0].Suggests;
var html="";
for(var i=0;i<data.length;i++){
html+='<li>'+data[i].Txt+'<li>';
}
$("#search-result").html(html);
$("#search-suggest").show().css({
top:$(".search-box").position().top+$("#search-form").height()+8,
left:$(".search-box").position().left+124,
position:'absolute'
});
},
error:function(){
console.log("失败")
}
});
//阻止事件冒泡到document，否则列表框会受到document的click事件而被hide()
event.stopPropagation();
});
$(document).on('click',function(){
$("#search-suggest").hide();
});
</script>
</body>
</html>
