不废话了,直接上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{background: #333;} #bg_div{ position: relative; width:1300px;height:690px; margin:0 auto; } #search_box{ position: absolute; top:150px; left: 200px; } #logo{ background-image: url("images/logo.png"); height:53px;width: 107px; float: left; margin: -4px 18px 0 0; } #search_form{ background-color: #fff; float: left; padding: 5px; } #search_input{ font-size: 20px; height:29px; line-height: 29px; width: 350px; border: 0; outline: none; float: left; } #search_submit{ background-image: url(images/search-button.png); width:29px; height:29px; border: 0; } #suggest{ display: none; width:388px; background-color:#fff; position:absolute; border-width:1px; border-style:solid; border-color: #999; padding: 0; margin: 0; } #suggest_result{ list-style: none; padding: 0; margin: 0; } #suggest_result li{ padding:3px;line-height:25px;font-size: 14px;color: #777; cursor: pointer; } #suggest_result li:hover{ background-color:#e5e5e5;; } </style> </head> <body> <div id="bg_div"> <div id="search_box"> <div id="logo"></div> <form id="search_form" action="https://cn.bing.com/search" target="_blank"> <input type="text" id="search_input" name="q"> <input type="submit" id="search_submit" value=""> </form> </div> </div> <div id="suggest"> <ul id="suggest_result"> </ul> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $('#search_input').on('keyup',function(){ var searchText=$(this).val(); var getdata = function (data) { var d = data.AS.Results[0].Suggests; var html = ""; for(var i = 0;i<d.length;i++) { html += '<li>' + d[i].Txt + '</li>'; } $('#suggest_result').html(html); $('#suggest').css({ top:$('#search_form').offset().top+$('#search_form').height()+10, left:$('#search_form').offset().left //position:'absolute' }).show(); } $.ajax({ type:'GET', url:"http://api.bing.com/qsonhs.aspx?type=cb&cb=getdata&q=" +searchText, dataType:"jsonp", async:false, jsonp:"getdata", jsonpCallback:"getdata", success:function(data) { getdata(data); } }) $(document).on('click',function() { $('#suggest').hide(); }) $('#suggest').delegate('li','click',function() { var keyword = $(this).text(); location.href='http://cn.bing.com/search?q='+keyword; }) }) </script> </body> </html>
实现的效果