Bing搜索框制作中获取到服务器响应却无法跳转到结果页面?

<!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>

http://img.mukewang.com/5810287300013cac13610656.jpg

按搜索按钮的时候只能跳转到必应的首页,我想跳转到搜索结果页面,怎么实现?

谢尔顿的发际线
浏览 1631回答 1
1回答

李晓健

首先你这么写会有跨域问题,不知道你不是解决了。然后你点搜索时,其实是提交你的form,而你的form的action属性是写死的,也就是必应的首页,所以每一次点击搜索按钮肯定是必应的首页。其实如果你的ajax请求发出去后它会给你返回一个url,你把你form的action改成对应的url,应该就可以了。
打开App,查看更多内容
随时随地看视频慕课网APP