<!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>
