body{background-color: #333;}
.bg-div{
background-image: url(images/river.jpg);
width: 1228px;
height: 690px;
margin: 0 auto;
}
.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;}
.form-input-text{
border:0;
float: left;
height: 25px;
line-height: 25px;
outline: none;
width: 350px;
font-size: 14px;
}
.form-input-submit{
border:0;
background-image: url(images/search-button.png);
width: 29px;
height: 30px;
float: left;
}
.search-box{
position: absolute;
top:200px;
left:300px;
}
.suggest{
width: 388px;
background-color: #fff;
border:1px solid #999;
}
.suggest ul{
list-style: none;
margin: 0;
padding: 0;
}
.suggest ul li{
padding: 3px;
font-size: 14px;
line-height: 25px;
cursor: pointer;
}
.suggest ul li:hover{
text-decoration: underline;
background-color: #e5e5e5;
}
- 搜索1
- 搜索2
- 搜索3
$('#search-input').bind('keyup',function(){
var searchText = $('#search-input').val();
$.get('http://blog.csdn.net/zhouyusong_bupt?q='+searchText,function(d){
var d = d.AS.Results[0].Suggests;
var html='';
for(var i=0;i
html+='
'+d[i].Txt+'';}
$('#search-result').html(html);
$('#search-suggest').show().css({
top:$('#search-form').offset().top+$('#search-form').height()+10,
// offset方法设置或返回被选元素相对于文档的偏移坐标
left:$('#search-form').offset().left,
position:'absolute'
});
},'json');
});
$(document).bind('click',function(){
$('#search-suggest').hide();
});