有用JS實(shí)現(xiàn)的嗎？請幫忙看一下哪里錯(cuò)了？
--------------------------代碼
<!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>js實(shí)現(xiàn)Bing搜索框</title>
<style type="text/css">
body{
background-color: #333;
}
.bg-div{
background-image: url(Images/river.jpg);width: 1280px;height: 750px;margin: 0 auto;position: relative;}
.logo{
margin: -4px 18px 0 0;
background-image: url(Images/logo.png);width: 107px;height: 53px;float: left;
}
form{
float: left;background-color: #fff;padding:5px;
}
.search-text{
border:none;float:left;height:25px;line-height:25px;outline:none;width:350px;
}
.search-button{
border:none;background-image:url(Images/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: #ccc;
}
</style>
</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-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="search-result">
<li>搜索1</li>
<li>搜索2</li>
<li>搜索3</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){
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;
}
var ajaxGet=function(url,callback){
var _xhr=null;
if(window.XMLHttpRequest){
_xhr=new window.XMLHttpRequest();
}else if(window.ActiveXObject){
_xhr=new ActiveXObject("Msxml2.XMLHTTP");
}
_xhr.onreadystatechange=function(){
if(_xhr.readyState==4&&_xhr.status==200){
callback(JSON.parse(_xhr.responseText));
}
}
_xhr.open('get',url,false);
_xhr.send(null);
}
var delegateEvent=function(target,event,fn){
addEvent(document,event,function(e){
if(e.target.nodeName==target.toUpperCase()){
fn.call(e.target);
}
});
}
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>';
}
var _dom=getDOM('search-suggest');
getDOM('search-result').innerHTML=html;
_dom.style.top=getElementTop(getDOM('srarch-form'))+38+'px';
_dom.style.left=getElementLeft(getDOM('search-form'))+'px';
_dom.style.position='absolute';
_dom.style.display='block';
});
});
delegateEvent('li','click',function(){
var keyword=this.innerHTML;
location.+keyword;
});
</script>
</body>
</html>
2016-05-19