为了账号安全,请及时绑定邮箱和手机立即绑定

下拉框显示不出来,可以帮帮忙看下吗?


<!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>搜索结果1</li>

        <li>搜索结果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>


正在回答

1 回答

id选择器缺少#号 

$('search-result').html(html);

$('search-suggest').show().css


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
搜索框制作
  • 参与学习       66041    人
  • 解答问题       431    个

本课程从简入深讲解搜索框的制作,学习JQ与JS实现Ajax技术的不同点

进入课程

下拉框显示不出来,可以帮帮忙看下吗?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信