下拉框顯示不出來,可以幫幫忙看下嗎?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YOYO search</title>
<style type="text/css">
body{
background-color:#333;}
.bg-div{
background-image:url(yoyo.jpg);
width:1228px;
height:690px;
margin:0 auto;
position:relative;
? ? ? }
?.logo{
?-4px 18px 0 0;
?background-image:url(logo1.png);
?width:60px;
?height:53px;
?float:left;
?}
?form{
?float:left;
?background-color:#fff;
?padding:12px;
?}
?.search-text{
?border:0;
?float:left;
?height:25px;
?line-height:25px;
?outline:none;
?width:350px;
?}
?.search-button{
?border:0;
?background-image:url(search-button.png);
?width:29px;
?height:29px;
?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; ?
?}
?
</style> ??
</head>
<body>
? ? <div class="bg-div">
? ? ? ?<div class="search-box">
? ? ? ? <div class="logo"></div>
? ? ? ? <form class="search-form" action="http://cn.bing.com/search" target="_blank" id="search-form">?
? ? ? ? <input type="text" class="search-text" name="q" id="search_input" autocomplete="off"/>
? ? ? ? <input type="submit" class="search-button" value=""/>
? ? ? ? </form>?
? ? ? ? </div>
? ? </div>
? ? <div class="suggest" id="search-suggest" style="display:none">
? ? <ul id="searach-result">
? ? ? ? <li>搜索結(jié)果1</li>
? ? ? ? <li>搜索結(jié)果2</li>
? ? ? </ul>
? ? ? </div>
? ? ? ? <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
? ? ? ? <script>
$('#search_input').bind('keyup',function(){
var searchText=$('#search_input').val();
$.get('http://api.bing.com/qsonhs.aspx?q='+searchText,function(d){
var d=d.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(),
left:$('#search-form').offset().left,
position:'absolute'
});
},'json');
});
$(document).bind('click',function(){
$('#search-suggest').hide();
});
</script>
</body>
</html>
2016-10-17
id選擇器缺少#號(hào)?
$('search-result').html(html);
$('search-suggest').show().css