為什么可以與服務器交換數據，但是卻不能顯示下拉菜單呢
<!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.+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>
2017-02-20
服務器可以交互數據?? 但是不顯示菜單勒