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

感觉script没起到作用,下拉列表不出来,求救大神

<html>

<head>

<title>bing search</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

<style type="text/css">

body{background-color:#333;}

.bg-div{background-image: url(river.jpg);width:1228px;height:690px;margin:0 auto;position:relative;}

.logo{background-image: url(logo.png);width:107px;height:53px;float:left;margin:-4px 18px 0 0;}

form{float:left;background-color:#fff;padding:5px}

.search-input-text{border:0;float:left;height:25px;line-height:25px;outline:none;width:350px;}

.search-input-button{border:0;background-image: url(search-button.png);width:29px;height:29px;float:left;cursor:pointer;}

.search-box{position:absolute;top:200px;left:300px;}

.suggest{width:388px;background-color:#fff;brder: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>

var getDOM = function(id){

return document.getElementById(id);

}


var addEvent = function(id,Event,fn){

var el = getDOM(id)||document;

if(el.addEventListener){

el.addEventListener(Event,fn,false);

}

else if(el.attachEvent){

el.attachEvent('on'+Event,fn);

}

}


var getElementLeft = function(element){

var actualLeft = element.offsetLeft;

var current = element.offsetParent;

while(current !== null){

actualLeft += current.offsetLeft;

current = current.offsetParent;

}

return actualLeft;

}

var getElementTop = function(element){

var actualTop = element.offsetTop;

var current = element.offsetParent;

while(current !== null){

actualTop += current.offsetTop;

current = current.offsetParent;

}

return actualTop;

}

addEvent('search_input','keyup',function(){

gteDOM('search-suggest').style.display = 'block';

getDOM('search-suggest').style.position = 'absolute';

getDOM('search-suggest').style.top = getElementTop(getDOM('search-form'))+38+'px';

    getDOM('search-suggest').style.left = getElementLeft(getDOM('search-form'))+'px';

});

</script>


</head>

<body>

<div class="bg-div">

 <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" class="search-input-text" name="q" id="search_input" autocomplete="off"/>

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

  </form>

 </div>

</div>

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

  <ul id="search-result">

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

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

  </ul>

</div>


</body>

</html>


正在回答

2 回答

getDOM('search-suggest').style.display = 'block';

你单词拼错啦。

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

你把你的js代码用window.onload=function(){}包起来试试!

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

qq_李秀琴_0 提问者

还是没有用诶
2016-01-28 回复 有任何疑惑可以回复我~

举报

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

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

进入课程

感觉script没起到作用,下拉列表不出来,求救大神

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