<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模仿百度搜索框</title> </head> <style> ul{ list-style: none; background: #fff; color:pink; } </style> <body> <div id="s_fm" class="s_form"> <div class="s_form_wrapper soutu-env-nomac soutu-env-newindex" id="s_form_wrapper"> <div id="lg" class="s-p-top"> <img id="s_lg_img" src="img/bsp.jpg" width="270" height="129"> </div> <div id="input"> <form id="form" class="fm" > <span id="s_kw_wrap" class="fn-left bg s_ipt_wr quickdelete-wrap"> <input type="text" class="s_ipt" id="kw" maxlength="100" autocomplete="off"> </span> <span class="fn-leftbtn_wr s_btn_wr bg" id="s_btn_wr"> <input type="button" value="百度一下" id="su" class="btn self-btn bg s_btn"> </span> </form> <ul id="inputList" style="display:none"></ul> </div> </div> </div> </body> <script src = "js/jquery-1.4.2.min.js"></script> <script> $(function(){ $("#kw").bind("keyup click",function(){ var t=$(this),_html=""; window.baidu= {}; window.baidu.sug = function(data){ var x = JSON.stringify(data); var x=eval ("(" + x + ")"); var abc = x.s; for(var i=0; i<abc.length; i++){ _html+="<li>"+abc[i]+"</li>"; } $("#inputList").html(_html); if(t.val() == ""){ $("#inputList").hide(); }else{ $("#inputList").show().css({ left:$("#kw").offset().left, top:$("#kw").offset().top+40 }) } if($("#inputList").html() == ""){ $("#inputList").hide(); } }; $.ajax({ async:false, url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+t.val(), dataType:'jsonp', jsonp:"mycallback", jsonpCallback:"window.baidu.sug" }); }) $(document).delegate("#inputList li","click",function(){ var key = $(this).text(); location.href = "https://www.baidu.com/s?wd="+key; }) $(document).delegate("#su","click",function(){ var key = $("#kw").val(); location.href = "https://www.baidu.com/s?wd="+key; }) $(document).click(function(){ $("#inputList").hide(); }) }); </script> </html>