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

帮忙看看代码,出不来下拉框,调试不好,谢谢

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge" /><!--解决浏览器兼容-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>bing search</title>

    <style type="text/css">

body{

background-color:#333;

}

.bg{

position:relative;

background-image:url(http://localhost:23688/river.jpg);

width:1228px;

height:690px;

margin:0 auto;

}

.search-form{

float: left;

background-color: #fff;

padding:5px;

}

.search-button{

background-image:url(http://localhost:23688/search-button.png);

width:29px;

height:29px;

float:left;

border:0;

}

.search-text{

width:350px;

height:25px;

line-height:25px;

border:0;

float:left;

outline:none;/*无边框*/

}

.search-box{

position:absolute;

top:150px;

left:200px;

}

.logo{

background-image:url(http://localhost:23688/logo.png);

width:107px;

height:53px;

float:left;

margin:-4px 18px 0 0;

}

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

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

    <script type="text/javascript">

     $('#search_input').bind('keyup', function () {

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

 top: $('#search-form').offset().top+$('#search-form').height,

 left: $('#search-form').offset().left,position:'absolute'

});//智能提示框

})

    </script>

    

</head>

<body>

    <div class="bg">

        <div class="search-box">

            <div class="logo"></div>

            <form class="search-form" action="https://cn.bing.com/search" target="_blank" id="search-form">

                <input type="text" name="q" class="search-text" id="search_input" autocomplete="off" />

                <input type="submit" class="search-button" value="" />

            </form>

        </div>

    </div>

    <div>

        <div class="suggest" id="search-suggest" style="display:none">

            <ul>

                <li>搜索结果1</li>

                <li>搜索结果2</li>

                <li>搜索结果3</li>

            </ul>

        </div>

    </div>

</body>

</html>



正在回答

举报

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

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

进入课程

帮忙看看代码,出不来下拉框,调试不好,谢谢

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