課程
/前端開發
/JavaScript
/搜索框制作
老師是怎么把頁面掛在BING的服務器下的？這
2016-04-18
源自：搜索框制作 2-5
正在回答
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <script type="text/javascript" src="js/jquery.min.js"></script> -->
<title>bing search</title>
<style type="text/css">
body{?
background-color:#333;}
.bg-div{ background-image:url(images/2010011712543911.jpg); background-repeat:no-repeat;?
width:1600px;?
height:1200px;?
margin:0 auto;}
.logo{ background-image:url(images/logo.png); background-repeat:no-repeat;?
width:120px;?
height:120px;
float:left;
margin:-46px 10px 0px 4px;}
form{ float:left; background-color:#fff;}
.search-input-text{ border:0; float:left; width:30px; height:30px; line-height:30px; outline:none; width:350px; }
.search-input-button{ margin:4px 8px 4px 4px; border:0; background:url(images/search.png) no-repeat; width:30px; height:30px; float:right;}
.search-box{ position:absolute;top:200px; left:400px;}
.suggest{width:390px; background-color:#fff; border:1px solid #999;}
.suggest ul{ list-style:none; margin:0px; padding:0px;}
.suggest ul li{ padding:4px; font-family:14px; line-height:25px; cursor:pointer;}
.suggest ul li:hover{text-decoration:underline; background-color:#e5e5e5;}
</style>
<script>
</script>
</head>
<body>
<div class="bg-div">
<div class="search-box">
<div class="logo"></div>
<form id="search-form" action="https://www.bing.com/search" target="_blank" method="get" class="search-warp">
<input id="search-input" autocomplete="off" type="text" class="search-input-text" name="q">
<input type="submit" class="search-input-button" value="">
</form>
</div>
<div class="suggest" id="search-suggest" style="display:none;">
<ul id="search-result">
<li>搜索結果1</li>
<li>搜索結果2</li>
<li>搜索結果3</li>
</ul>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
$('#search-input').bind('keyup',function(){
var searchText=$('#search_input').val();
$.get('https://www.bing.com/search?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').height(),
left: $('#search-form').offset().left,
position:'absolute'
});
},'json');
</body>
</html>
只要調用的接口是bing提供的接口就行了
請叫我橙子蛋 提問者
舉報
本課程從簡入深講解搜索框的制作，學習JQ與JS實現Ajax技術的不同點
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-04-19
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <script type="text/javascript" src="js/jquery.min.js"></script> -->
<title>bing search</title>
<style type="text/css">
body{?
background-color:#333;}
.bg-div{ background-image:url(images/2010011712543911.jpg); background-repeat:no-repeat;?
width:1600px;?
height:1200px;?
margin:0 auto;}
.logo{ background-image:url(images/logo.png); background-repeat:no-repeat;?
width:120px;?
height:120px;
float:left;
margin:-46px 10px 0px 4px;}
form{ float:left; background-color:#fff;}
.search-input-text{ border:0; float:left; width:30px; height:30px; line-height:30px; outline:none; width:350px; }
.search-input-button{ margin:4px 8px 4px 4px; border:0; background:url(images/search.png) no-repeat; width:30px; height:30px; float:right;}
.search-box{ position:absolute;top:200px; left:400px;}
.suggest{width:390px; background-color:#fff; border:1px solid #999;}
.suggest ul{ list-style:none; margin:0px; padding:0px;}
.suggest ul li{ padding:4px; font-family:14px; line-height:25px; cursor:pointer;}
.suggest ul li:hover{text-decoration:underline; background-color:#e5e5e5;}
</style>
<script>
</script>
</head>
<body>
<div class="bg-div">
<div class="search-box">
<div class="logo"></div>
<form id="search-form" action="https://www.bing.com/search" target="_blank" method="get" class="search-warp">
<input id="search-input" autocomplete="off" type="text" class="search-input-text" name="q">
<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>
<li>搜索結果3</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$('#search-input').bind('keyup',function(){
var searchText=$('#search_input').val();
$.get('https://www.bing.com/search?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').height(),
left: $('#search-form').offset().left,
position:'absolute'
});
},'json');
});
</script>
</body>
</html>
2016-04-19
只要調用的接口是bing提供的接口就行了