仿必应搜索搜索提示

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; margin: 0; } body { background-color: #333; } .bg-div{ background-image: url('http://sandbox.runjs.cn/uploads/rs/94/oedovyl6/1.jpg'); width: 1228px; height: 690px; margin: 0 auto; position: relative; } .logo { background-image: url('http://sandbox.runjs.cn/uploads/rs/94/oedovyl6/2.jpg'); width: 107px; height: 53px; float: left; margin: -4px 18px 0 0; } form { float: left; background-color: #fff; padding: 5px; } .search-input-text { border: 0; float: left; height: 25px; line-height: 25px; outline: none; width: 350px; font-size: 16px; } .search-input-button { border: 0; background: transparent url(http://sandbox.runjs.cn/uploads/rs/94/oedovyl6/3.jpg) no-repeat -30px -107px; width: 29px; height: 29px; float: left; } .search-box { position: absolute; top: 200px; left: 300px; } #search-suggest { width: 388px; background-color: #fff; border: 1px solid #999; display: none; } .suggest ul { list-style: none; } .suggest ul li { padding: 3px; font-size: 14px; line-height: 25px; cursor: pointer;/*手型*/ } .suggest ul li:hover { text-decoration: underline; background-color: #e5e5e5; } </style> </head> <body> <div class="bg-div"> <div class="search-box"> <div class="logo"></div> <form id="search-form"> <input type="text" class="search-input-text" autocomplete="off" name="q" id="search_input" /> <input type="submit" class="search-input-button" value="" id="search_submit"> </form> </div> </div> <div class="suggest" id="search-suggest"> <ul id="search-result"> <li>搜索结果1</li> <li>搜索结果2</li> </ul> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> //jQuery实现功能 $(function() { //键盘事件 $("#search_input").bind("keyup", function() { var searchText = $("#search_input").val(); /*$.get( "http://api.bing.com/qsonhs.aspx?q="+searchText , function(data) { console.log(data); var d = data.AS.Results[0].Suggests; 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").height()+10, left : $("#search-form").offset().left, position : "absolute", }); } , "json");*/ $.ajax({ type: "GET", url: "http://api.bing.com/qsonhs.aspx?type=cb&q=" + searchText, dataType: "jsonp", jsonp: 'cb', success: function(data) { if(data == null) { $("#search-suggest").hide(); return false; } if(data.AS == null) { $("#search-suggest").hide(); return false; } if(data.AS.Results == null) { $("#search-suggest").hide(); return false; } if(data.AS.Results[0] == null) { $("#search-suggest").hide(); return false; } if(data.AS.Results[0].Suggests == null) { $("#search-suggest").hide(); return false; } var d = data.AS.Results[0].Suggests; 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").height() + 10, left: $("#search-form").offset().left, position: "absolute", }); } }) }); $(document).bind("click", function() { $("#search-suggest").hide(); }); //事件代理 --》鼠标点击事件 $(document).delegate("li", "click", function() { var keyword = $(this).text(); location.href = "http://cn.bing.com/search?q=" + keyword; }); $("#search-form").submit(function() { var keyword = $("#search_input").val(); console.log("word=" + keyword); //if (keyword == null) {return false;} location.href = "http://cn.bing.com/search?q=" + keyword; }); }); </script> </html>

提示：你可以先修改部分代码再运行。

http://runjs.cn/detail/dy6w2f9o

转载请注明：有爱前端 » 仿必应搜索搜索提示