一直解决不了跨域的问题,先不说跨域,我的这段代码错在哪里啊?????!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>搜索框制作的练习</title>
<style type="text/css">
body{
background-color: #333;
}
.bg-div{
background-image: url(image/river.jpg);
background-repeat: no-repeat;
width:1290px;
height: 626px;
margin:0 auto;
}
.log{
background-image: url(image/logo.png);
background-repeat: no-repeat;
width:107px;
height: 53px;
float: left;
}
.search-box{
position:absolute;
top:200px;
left:300px;
}
form{
background-color: #FFF;
padding:5px;
margin:8px 0 0 20px;
float: left;
}
.search-input-text{
border:0;
outline: none;
width:350px;
height: 29px;
line-height: 25px;
float: left;
}
.search-input-button{
background-image: url(image/search-button.png);
background-repeat: no-repeat;
border: 0;
width:29px;
height: 29px;
float: left;
}
.suggest{
display:none;
width:388px;
border:1px solid #e5e5ee;
background-color: #FFF;
}
.suggest ul{
list-style: none;
margin:0;
padding:0;
}
.suggest ul li{
padding:3px;
line-height: 25px;
font-size: 14px;
cursor: pointer;
}
.suggest ul li:hover{
background-color: #e5e5e5;
text-decoration: underline;
}
</style>
<script type="text/javascript">
//主体
window.onload=function(){
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.Requests[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-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';
});
});
delegateEvent('li', 'click', function() {
var keyword=this.innerHTML;
location.href='http://cn.bing.com/search?q='+keyword;
});
};
function getDOM(id){
return document.getElementById(id);
}
//事件代理
function addEvent(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);
}
}
function getElementLeft(element){
var actualLeft=element.offsetLeft;
var current=element.offsetParent;
while(current !==null){
actualLeft+=current.offsetLeft;
current=current.offsetParent;
}
return actualLeft;
}
function getElementTop(element){
var actualTop=element.offsetTop;
var current=element.offsetParent;
while(current!==null){
actualTop+=current.offsetTop;
current=current.offsetParent;
}
return actualTop;
}
function ajaxGet(url,callback){
var _xhr=null;
if(window.XMLHttpRequest){
_xhr=new window.XMLHttpRequest();
}else if(window.ActiveXObject){
_xhr=new ActiveXObject("Msxml2.XMLHTTP");
}
function _xhronreadystatechange(){
if(_xhr.readyState==4&&_xhr.status==200){
alert(11);
callback(JSON.parse(_xhr.responseText));
}
_xhr.open('get',url,true);
_xhr.send(null);
}
}
function delegateEvent(target,event,fn){
addEvent(document,event,function(e){
if(e.target.nodeName==target.toUpperCase()){
fn.call(e.target);
}
});
}
</script>
</head>
<body>
<div>
<div>
<div></div>
<form action="http://cn.bing.com/s" target="_blank" method="get" id="search-form">
<input type="text" name="q" id="search_input" />
<input type="submit" / value="">
</form>
</div>
</div>
<div id="search-suggest">
<ul id="search-result">
<li>搜索1</li>
<li>搜索2</li>
<li>搜索3</li>
</ul>
</div>
</body>
</html>