我的js不出效果,麻烦各位帮我看看哪里有问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bing search</title>
<style>
body{
background-color: #333;
}
.bg-div{
position: relative;
background-image: url(img/river.jpg);
width: 1228px;
height: 690px;
margin: 0 auto;
}
.logo{
background-image: url(img/logo.png);
width: 107px;
height: 53px;
float: left;
margin: -4px 18px 0 0;
}
form{
float: left;
background-color: #fff;
padding: 5px;
}
.search-text{
border: 0;
float: left;
height: 25px;
line-height: 25px;
outline: none;
width: 350px;
}
.search-button{
cursor: pointer;
border: 0;
background-image: url(img/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 action="https://cn.bing.com/search" target="_blank" id="search-form" class="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-suggeset" style="display: none;">
<ul id="search-result">
<li>搜索结果1</li>
<li>搜索结果2</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){ //addEventListener适用于非IE浏览器
el.addEventListener(event,fn,false);
}else if(el.attachEvent){ //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 = current.offsetParent;
}
return actualTop;
}
var ajaxGet = function(url,callback){
var _xhr = null;
if(window.XMLHttpRequest){
_xhr = new window.XMLHttpRequest(); //XMLHttpRequest适用于非IE浏览器
}else if(window.ActiveXObject){
_xhr = new ActiveXObject("Msxml2.XMLHTTP"); //ActiveXObject适用于IE浏览器
}
_xhr.onreadystatechange = function(){
if(_xhr.readyState == 4 && _xhr.status == 200){ //当readyState==4并且status==200时,表示服务器正确响应并返回信息
callback(JSON.parse(_xhr.responseText));
//JSON.parse()的作用是把字符串转化为JS可以识别的对象
}
}
_xhr.open("get",url,false); //要使用AJax技术,第三个参数必须设置为false
_xhr.send(null);
}
addEvent("search-input","keyup",function(){
var searchText = getDom("search-input").value;
ajaxGet('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>";
}
getDom("search-result").innerHTML = html;
getDom("search-suggeset").style.top = getElementTop(getDom("search-form"))+38+"px";
getDom("search-suggeset").style.left = getElementLeft(getDom("search-form"))+"px";
getDom("search-suggeset").style.position = "absolute";
getDom("search-suggeset").style.display = "block";
})
})
</script>
</body>
</html>