                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /搜索框制作

這個(gè)問題怎么解決，第一次接觸AJAX，謝謝了

<!DOCTYPE html>
<html>
<head>
<title>bing swarch1</title>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta charset="utf-8">
<script type="text/javascript" src="JS/jquery-3.1.0.min.js"></script>
<style type="text/css">
body{background: #333}
.bg-div{margin: 0 auto;background: url(images/river.jpg);width: 1228px;height: 690px;position: relative;}
.logo{width: 107px;height: 53px;background: url(images/logo.png);float:left;margin: -4px 18px 0 0}
form{float: left;background: #FFF;padding: 5px}
.search-input-text{border: 0;float: left;height: 25px;line-height: 25px;outline: none;width: 350px}
.search-input-button{border: 0;background-image: url(images/search-button.png);width: 29px;height: 29px;float: left;cursor:pointer;}
.search-box{position: absolute;top: 200px;left: 300px}
.suggest{background: #fff;width: 388px;border: 1px solid #999}
.suggest ul{list-style-type: 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: #e5e5e5}
</style>
</head>
<body>
<div class="bg-div">
<div class="search-box">
<div class="logo"></div>
<form id="search_form">
<input type="text" class="search-input-text" id="search_input" />
<input type="submit" class="search-input-button" value="" />
</form>
</div>
</div>
<div class="suggest" id="search-suggest" style="display:none;">
<ul id="search_result">
<li>搜索效果1</li>
<li>搜索效果2</li>
</ul>
</div>
<script type="text/javascript">
$('#search_input').bind('keyup',function(){
var searchText=$('#search_input').val();
$.get('https://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>'
}
$('#search_result').html(html);
$('#search-suggest').show().css({
top:$('#search_form').offset().top+$('#search_form').outerHeight(),
left:$('#search_form').offset().left,
position:'absolute'
})
},'json')
})
$(document).bind('click',function(){
$('#search-suggest').hide()
})
</script>
</body>
</html>

00:01

Mycat_

2016-08-25

源自：搜索框制作 2-5

關(guān)注問題我要回答

676

操作

收起

3 回答

慕無忌4252426
2016-08-31

var?text?=?$("#text");
text.on('input',function()?{
var?list?=?$('#list');
var?searchText?=?text.val();
if?(searchText.trim()?!=?"")?{
$.ajax({
???type?:?'GET',
???url?:?'http://sg1.api.bing.com/qsonhs.aspx?type=cb&cb=callback&q='+searchText,
???dataType?:?'jsonp',
???jsonp?:?'cb',
???success?:?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>';
}
list.html(html)
list.css('display','block');
???},
???error?:?function(){}
})
}?else?{
list.css('display',"none");
}
});