<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bing搜索框</title>
<style type="text/css">
body{margin: 0;padding:0;}
.bgdiv{background-image: url(river.jpg);width: 1366px;height:657px;position: relative; margin: 0,auto;}
.sbox{position: absolute;top:131px;left:109px;}
.logo{background-image: url(logo.png);width:107px;height:53px;float:left;margin: -4px 18px 0 0;}
.search-form{float:left;background-color:#FFF;}
.search-text{margin-left:9px;border: none;height:43px;line-height:43px;float: left;outline: none;width:490px;font-size: 18px}
.search-button{border: none;background-image: url(bar.png);width:45px;height:45px;background-position:-160px -55px; background-color:#0C8484;float:left;cursor: pointer;}
.suggest{width:546px;background-color: #FFF;border-top:1px solid #E5E5E5;position: absolute;top:45px;left:125px;}
.suggest{list-style: none;margin:0;padding: 0;display: none;}
.suggest li{padding: 4px 5px 5px 11px;}
.suggest li:hover{text-decoration-line: underline;cursor: pointer;background-color: #F5F5F5;}
.suggest li span{color:#666666;}
</style>
</head>
<body>
<div class="bgdiv">
<div class="sbox">
<div class="logo"></div>
<form class="search-form" action="https://cn.bing.com/search" target="_blank">
<input type="text" class="search-text" id="search-input" autocomplete="off">
<input type="submit" class="search-button" value="">
</form>
<ul class="suggest" id="suggest">
<li class="item"><span>手机</span></li>
<li class="item"><span>手机</span>助手</li>
<li class="item"><span>手机</span>管家</li>
<li class="item"><span>手机</span>微信</li>
<li class="item"><span>手机</span>壁纸</li>
<li class="item"><span>手机</span>号码归属地查询</li>
<li class="item"><span>手机</span>排行榜</li>
<li class="item"><span>手机</span>游戏</li>
</ul>
</div>
</div>
</body>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(window).on("load",function(){
$("#search-input").on("keyup",function(){
var searchText=$("#search-input").val();
$.get("http://api.bing.com/qsonhs.aspx?q="+searchText,function(data){
var result=data.AS.Results[0].Suggests;
var html="";
$(result).each(function(i,val){
html+="<li>"+val.Txt+"</li>"
})
$("#suggest").html(html);
if ($("#search-input").val().length!=0) {
$("#suggest").css("display","block")
} else {
$("#suggest").css("display","none")
}
},"json");
})
})
</script>
</html>按搜索按钮的时候只能跳转到必应的首页,我想跳转到搜索结果页面,怎么实现?
1 回答
李晓健
TA贡献1036条经验 获得超461个赞
首先你这么写会有跨域问题,不知道你不是解决了。
然后你点搜索时,其实是提交你的form,而你的form的action属性是写死的,也就是必应的首页,所以每一次点击搜索按钮肯定是必应的首页。其实如果你的ajax请求发出去后它会给你返回一个url,你把你form的action改成对应的url,应该就可以了。
添加回答
举报
0/150
提交
取消