<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>
添加回答
举报
0/150
提交
取消