js代码下拉框没有出来，大神帮看下代码哪里有问题（新手求教~）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bing 搜索框制作</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background-color: #333;
/*height: 620px;*/
}
#bg-div {
width: 1228px;
height: 600px;
background: url("river.jpg") no-repeat;
margin: 0 auto;
/*position: relative;*/
}
#search {
position: absolute;
left: 315px;
top: 200px;
}
.logo {
width: 107px;
height: 53px;
background: url("logo.png") no-repeat;
float: left;
margin: -4px 18px 0 0;
}
form {
float: left;
background-color: #fff;
/*margin-left: 15px;*/
padding: 5px;
}
input[type="text"] {
width: 300px;
height: 30px;
line-height: 30px;
outline: none;/*只有chrome点击进入文本有输入框轮廓outline*/
padding-left: 5px;
border: 0;
float: left;/*向左浮动与logo对齐*/
}
input[type="submit"] {
width: 29px;
height: 29px;
background: url("search-button.png") no-repeat center;
/*margin-left: -45px;*/
border: 0;
float: left;/*向左浮动与text对齐*/
cursor: pointer;/*鼠标滑过“搜索”按钮时光标变为“小手”型状*/
}
.suggest {
width: 343px;
background-color: #fff;
border: 1px solid #999;
/*display: none;*/
/*position: absolute;
top: 240px;
left: 440px;*/
}
.suggest ul {
list-style: none;
}
.suggest ul li {
padding: 3px;
font-size: 14px;
line-height: 25px;
cursor: pointer;
}
.suggest ul li:hover {
background-color: #e5e5e5;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="bg-div">
<div id="search">
<div></div>
<form action="" id="search_form">
<input type="text" id="search_input" placeholder="请输入搜索内容" />
<input type="submit" value />
</form>
</div>
</div>
<div id="search_suggest" style="display: none;">
<ul id="search_result">
<li>搜索结果1</li>
<li>搜索结果2</li>
<li>搜索结果3</li>
<li>搜索结果4</li>
</ul>
</div>
<script>
var getDOM = function (id) {
return document.getElementById(id);
}
var addEvent = function (id, event, fn) {
var el = getDOM(id) || document;
if(el.addEventListener) {//非IE浏览器
el.addEventListener(event, fn, false);
} else if(el.attachEvent) {//IE浏览器
el.attachEvent('on' + event, fn);
}
}
var getElementLeft = function (element) {
var actualLeft = element.offsetLeft;//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 = element.offsetParent;
}
return actualTop;
}
addEvent('search_input', 'keyup', function () {
getDOM('search_suggest').style.top = getElementTop(getDOM('search_form')) + 38 + 'px';
getDOM('search_suggest').style.left = getElementLeft(getDOM('search_form')) + 'px';
getDOM('search_suggest').style.position = 'absolute';
getDOM('search_suggest').style.display = 'block';
});
</script>
</body>
</html>
