<html>
<head>
<title>bing search</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
*{padding: 0;margin: 0}
ul{list-style: none;}
body{background: #333;}
.bg-div{background-image: url(images/river.jpg);width:1228px;height:690px;margin:0 auto;position: relative;}
.logo{margin:-4px 18px 0 0;background-image: url(images/logo.png); width:107px;height: 53px;float: left}
form{float: left;background-color: #fff;padding: 5px;}
.search-input-text{border:0;float: left;width:350px;height: 25px;line-height: 25px;outline: none;}
.search-input-button{border:0;background-image: url(images/search-button.png);width: 29px;height: 29px;border:0;float: left;}
.search-box{position: absolute;top:200px;left:300px;}
.suggest{width: 388px;background: #fff;border:1px solid #999;}
.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="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<script>
$(document).ready(function(){
$('#search-input').bind('keyup',function(){
var searchText=$('#search-input').val();
$.ajax({
url:'http://api.bing.com/qsonhs.aspx?type=cb&cb=cab&q='+searchText,
dataType:'jsonp',
jsonp:'cb',
jsonpCallback:'cab',
success:function(d){
var d=d.AS.Results[0].Suggests;
var html='';
for(var i=0;i<d.length;i++){
html+='<li>'+d[i].Txt+'</li>';
}
$('#result').html(html);
var resultleft=$('#search-form').offset().left;
var resulttop=$('#search-form').offset().top+$('#search-form').outerHeight();
$('#search-result').show().css({'left':resultleft+'px','top':resulttop+'px'});
}
});
/*$.get('http://api.bing.com/qsonhs.aspx?q='+searchText+'&o=a+ds+ds+h+p',function(d){
var d=d.As.Result[0].Suggest;
var html='';
for(var i=0;i<d.length;i++){
html+='<li>'+d[i].Txt+'</li>';
}
$('#search-result').html(html);
$('#search-suggest').show().css({
top:$('#search-form').offset().top+$('#search-form').outerHeight(),
left:$('#search-form').offset().left,
position:'absolute'
});
},'json');*/
});
$(document).delegate('li','click',function(){
var keyword=$(this).text;
location.href='http://cn.bing.com/search?q='+keyword;
})
});
</script>
</head>
<body>
<div class="bg-div">
<div class="search-box">
<div class="logo"></div>
<form action="" id="search-form">
<input type="text" class="search-input-text" id="search-input"/>
<input type="submit" class="search-input-button" value="" />
</form>
</div>
</div>
<div class="suggest" id="search-suggest" style="display:none">
<ul id="search-result">
<li>搜索结果1</li>
<li>搜索结果2</li>
</ul>
</div>
</body>
</html>
田心枫
相关分类