极客观点
项目管理
HarmonyOS
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--浏览器文档模式以IE最新的Edge文档模式渲染，防止IE进入怪异模式渲染-->
<title>JQuery实现Bing搜索</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
body{
background-color:#333;
font-family: 'Segoe UI',Arial,Helvetica,Sans-Serif;
}
#bg-div{
background:url(bg.jpg) no-repeat;
background-size:cover;
position:absolute;
margin:0 auto;
z-index:-1;
min-width:1130px;
min-height: 565px;
font-size:18px;
}
.logo{
background-image:url(logo.png);
width:107px;
height:53px;
float:left;
margin:-4px 18px 0 0;
}
form{
float:left;
background-color:#fff;
}
.search{
width:1028px;
position:absolute;
top:20%;
left:8%;
}
form input#search-box{
width:487px;
height:40px;
max-height: 30px;
margin:5px 1px 0 9px;
border-right:0px;
padding:0 4px 0 0;
border:0;
outline:none;
font-size:100%;
position: relative;
font:inherit;
box-sizing:content-box;
}
form .search-buttom{
height:45px;
width:45px;
border:8px solid #0c8484;
background:#0c8484 url(sprite.png) no-repeat -169px -63px;
text-indent:-99em;
cursor:pointer;
}
#search-suggest{
display:none;
background-color:#fff;
width:551px;
border:1px solid #999;
z-index:2;
position: absolute;
}
.suggest ul{
list-style:none;
cursor:pointer;
}
.suggest ul li{
padding:0 10px;
height:30px;
line-height:30px;
color:#639;
}
.suggest ul li.hover{
text-decoration:underline;
background-color:#f5f5f5;
}
</style>
</head>
<body>
<div id="bg-div"></div>
<div class="search" id="s">
<div class="logo"></div>
<form action="https://www.bing.com/search" method="get">
<input type="text" class="search-box" id="search-box"/>
<input type="submit" class="search-buttom" />
</form>
</div>
<div class="suggest" id="search-suggest">
<ul id="search-result">
<li>搜索结果1</li>
<li>搜索结果2</li>
<li>搜索结果3</li>
<li>搜索结果4</li>
<li>搜索结果5</li>
<li>搜索结果6</li>
<li>搜索结果7</li>
</ul>
</div>
</body>
<script type="text/javascript" src="..\..\..\..\..\可用代码\jQuery\jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var H=$(window).height();
var W=$(window).width();
$("#bg-div").css({
width:W+"px",
height:H+"px"
});
$("#search-suggest").css({
top:$("#s").offset().top+45+"px",
left:$("#s").offset().left+124+"px"
});
$(window).resize(function(){
var H=$(window).height();
var W=$(window).width();
$("#bg-div").css({
width:W+"px",
height:H+"px"
});
$("#search-suggest").css({
top:$("#s").offset().top+45+"px",
left:$("#s").offset().left+124+"px"
});
});
$(document).bind("click",function(){
$("#search-suggest").hide();
});
$("#search-box").bind("keyup",function(event){
event.stopPropagation();
$.ajax({
url:"https://api.cognitive.microsoft.com/bing/v5.0/suggestions/?q="+$("#search-box").val()+"&mkt=zh-cn",
beforeSend:function(xhrObj){
xhrObj.setRequestHeader("Ocp-Apim-Subscription-key","{e1e471be1169419ba4227d88f01de09a}");
},
type:"GET",
dataType:"json",
});
});
});
function hover(){
$("#search-suggest li").each(function(index,value){
$value=$(value);
$value.mouseover(function(){
$(this).addClass("hover");
});
$value.mouseout(function(){
$(this).removeClass("hover");
});
});
}
</script>
</html>为什么我在输入框输入的时候，总是提示401错误,提示如下：
这个是不是跨域的原因，但是如果我加上了jsonp之后，也是401错误
$("#search-box").bind("keyup",function(event){
event.stopPropagation();
$.ajax({
url:"https://api.cognitive.microsoft.com/bing/v5.0/suggestions/?type=cb&q="+$("#search-box").val()+"&mkt=zh-cn",
beforeSend:function(xhrObj){
xhrObj.setRequestHeader("Ocp-Apim-Subscription-key","{e1e471be1169419ba4227d88f01de09a}");
},
type:"GET",
dataType:"json",
jsonp:"cb",
})
});```
这个微软认知服务里面的必应自动推荐的api到底要怎么用啊。。。
是跨域。
这个服务需要你申请，微软给你秘钥。