为什么可以与服务器交换数据，但是却不能显示下拉菜单呢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索框制作</title>
<style type="text/css">
body{
background-color: #333;
}
#bg{
background-image: url(images/river.jpg);
width: 1230px;
height: 768px;
margin: 0 auto;
position: relative;
}
.wrap{
position: absolute;
top: 120px;
left: 170px;
}
.logo{
background-image: url(images/logo.png);
width: 107px;
height: 53px;
float: left;
margin: -4px 15px 0 0;
}
form{
float: left;
background:#fff;
padding: 5px;
}
input{
border:none;
}
.input-text{
outline: none;
float: left;
height: 30px;
line-height: 30px;
width: 400px;
}
.input-submit{
background-image: url(images/search-button.png);
width: 29px;
height: 29px;
float: left;
cursor: pointer;
}
#search-tips{
width: 439px;
background:#fff;
font-size: 16px;
border:1px solid #817272;
}
#search-tips ul{
list-style: none;
margin: 0;
padding: 0;
}
#search-tips ul li{
padding: 3px;
height: 25px;
line-height: 25px;
}
#search-tips ul li:hover{
cursor: pointer;
background: #999;
}
</style>
</head>
<body>
<div id="bg">
<div>
<div></div>
<form action="https://www.bing.com/search" target="_blank" id="search-form">
<input type="text" id="search-input" autocomplete='off'/>
<input type="submit" value="" />
</form>
</div>
</div>
<div id="search-tips" style="display:none">
<ul id="search-result">
<li>搜索结果1</li>
<li>搜索结果2</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
/*//当搜索框有键盘按下时执行函数
$('#search-input').bind('keyup',function(){
//获取搜索框的值（要搜索的关键词）
var searchText=$('#search-input').val();
//从服务端请求数据
$.get('http://api.bing.com//qsonhs.aspx?q='+searchText,function(d){
//获取服务端返回的结果存到d变量中
var d=d.AS.Results[0].Suggests;
var html='';
//对服务器返回的结果进行遍历，
for(var i=0;i<d.length;i++){
html+='<li>'+d[i].Txt+'</li>';
}
//把服务器返回来的结果替换到下拉列表中
$('#search-result').html(html);
//如果数据请求成功的话，就显示下拉菜单
$('#search-tips').show().css({
position:'absolute',
top:$('#search-form').offset().top+$('#search-form').height()+10,
left:$('#search-form').offset().left-1
});
},'json')
})
//当点击页面上的某一处时，隐藏下拉菜单
$(document).bind('click',function(){
$('#search-tips').hide();
})
//事件代理，当点击li时，跳转到相应的链接
$(document).delegate('li','click',function(){
//获取li元素里的文本
var keyword=$(this).text();
//跳转到相应页面
location.href='http://cn.bing.com/search?q='+keyword;
})*/
//封装函数。通过一个元素的id获取该元素
var getDOM=function(id){
return document.getElementById(id);
}
//
var addEvent=function(id,event,fn){
//如果有传'id'这个参数就获取这个元素，没有的话就用document，防止浏览器报错。
var el=getDOM(id)||document;
//兼容非IE浏览器
if (el.addEventListener) {
el.addEventListener(event,fn,false);
}else{
//兼容IE浏览器
el.attachEvent('on'+event,fn);
}
}
var getoffsetTop=function(element){
var actualltop=element.offsetTop;
//离当前元素最近的祖先定位元素。
var current=element.offsetParent;
while(current!=null) {
actualltop+=current.offsetTop;
current=current.offsetParent;
};
return actualltop;
}
var getoffsetLeft=function(element){
var actuallleft=element.offsetLeft;
var current=element.offsetParent;
while(current!=null) {
actuallleft+=current.offsetLeft;
current=current.offsetParent;
};
return actuallleft;
}
//url:获取资源的地址，callback:执行回调函数（服务器响应结果的那个函数）
var getajax=function(url,callback){
var _xhr=null;
//在非IE里发送请求的对象
if (window.XMLHttpRequest) {
_xhr=new window.XMLHttpRequest();
}else{
//在IE里发送请求的对象
_xhr=new ActiveObject('Msxml2.XMLHTTP');
}
//服务端的状态发生变化的时候
_xhr.onreadystatechange=function(){
//服务器正确响应并返回信息
if (_xhr.readyState==4&&_xhr.status==200) {
//服务器返回的结果会存放在responseText，这是一个字符串，需要解析成js可以识别的对象
//JSON.parse()：将字符串转换成js可以识别的对象。
callback(JSON.parse(_xhr.responseText))
};
}
//发送请求时打开与服务器之前的链接，false指用异步的方式交互数据
_xhr.open('get',url,false);
_xhr.send(null);
}
var delegateEvent=function(target,even,fn){
addEvent(document,even,function(e){
if (e.target.nodeName==target.toUpperCase) {};
})
}
addEvent('search-input','keyup',function(){
//获取搜索框上的搜索内容
var searchText=getDOM('search-input').value;
//url地址的规则由服务器决定
getajax('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.lenth;i++){
html+='<li>'+d[i].Txt+'<li>';
}
getDOM('search-result').innerHTML=html;
getDOM('search-tips').style.top=getoffsetTop(getDOM('search-form'))+42+'px';
getDOM('search-tips').style.left=getoffsetLeft(getDOM('search-form'))+'px';
getDOM('search-tips').style.position='absolute';
getDOM('search-tips').style.display='block';
})
})
addEvent(document,'click',function(){
getDOM('search-tips').style.display='none';
})
</script>
</body>
</html>
