代码如下：
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<title>bing search</title>
<style type="text/css">
body{background-color: #333;}
.bg-div{position:relative;background-image: url(river.jpg);width:1228px;height:690px;margin: 0 auto;}
.logo{background-image: url(logo.png);height:53px;width: 107px; float: left;margin: -4px 18px 0 0;}
.search-form{float: left; background-color: #fff;padding:5px;}
.search-text{height:25px;line-height: 25px;float: left;width: 350px;border: 0;outline: none;}
.search-button{background-image: url(search-button.png);width:29px;height:29px;float: left;border: 0}
.search-box{position:absolute;top:150px;left: 200px; }
.suggest{width:388px; background-color:#fff;position:absolute;margin:0;padding:0;border-width:1px;border-style:solid;border-color: #999;}
.suggest ul{list-style:none;display:block;margin:0;padding:0}
.suggest ul li {padding:3px;line-height:25px;font-size: 14px;color: #777;cursor: pointer;padding:3px;}
.suggest ul li:hover{background-color:#e5e5e5;text-decoration: underline;}
.suggest strong{color:#000;}
.clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0px;}
.clearfix{zoom:1}
.nav{margin:0 auto; width:1228px;}
.nav ul{list-style:none;margin:0;padding:0;}
.nav ul li{float:left;padding:10px;}
.nav ul li a{color:#999; text-decoration:none;font-size:12px; font-weight:bold;}
a:hover {text-decoration: underline;}
</style>
</head>
<body>
<div class="nav">
<ul class="clearfix">
<li><a href="#">图片</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">词典</a></li>
<li><a href="#">咨询</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">影响力</a></li>
<li><a href="#">更多</a></li>
</ul>
</div>
<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">
<input type="text" class="search-text" name="q" id="search_input" autocomplete="off"/>
<input type="submit" class="search-button" value=""/>
</form>
</div>
</div>
<div class="suggest" id="search-suggest" style="display:none">
<ul id="search-result">
<li> 搜索内容 </li>
<li> 搜索内容 </li>
</ul>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$('#search_input').bind('keyup',function(){
var jqueryInput = $(this);
var searchText = jqueryInput.val();
$.get('http://api.bing.com/qsonhs.aspx?q='+searchText);
});
$('#search-suggest').css({
top:$('#search-form').offset().top+$('#search-form').height()+10,
left:$('#search-form').offset().left
}).show();
</script>
</body>
</html>
效果图如下：
