JS及JQ使用JSONP实现跨域调用必应搜索

一、JQ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ实现</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #333 url('http://img.mukewang.com/52da5e7d0001c0f813660768.jpg') no-repeat top/cover;
        }

        #container {
            position: relative;
            width: 600px;
            margin: 100px auto;
        }
        img {
            display: block;
            float: left;
        }
        #search {
            float: left;
            width: 440px;
            background: #FFF;
            margin: 5px;
            margin-left: 15px;
            padding-left: 10px;
        }
        #searchText {
            display: block;
            float: left;
            width: 400px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            border: none;
            outline: none;
        }
        #submit {
            display: block;
            float: left;
            background: url('http://img.mukewang.com/52da5df800012b1e02220137.jpg') no-repeat -30px -107px;
            width: 30px;
            height: 30px;
            margin: 5px;
            border: none;
        }
        #suggest {
            display: none;
            width: 450px;
            position: absolute;
            top: 45px;
            left: 122px;
            background: #FFF;
            border-top: 1px solid #CCC;
            list-style: none;
        }
        #suggest li {
            height: 28px;
            line-height: 28px;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <div id='container'>
        <img src="http://img.mukewang.com/52da5e530001eea901070053.jpg">
        <div id='search'>
            <form action="https://www.bing.com/search" target='_blank'>
                <input type="text" id='searchText' name='q' autocomplete="off">
                <input type="submit" id='submit' value="">
            </form>
        </div>
        <ul id='suggest'></ul>
    </div>
</body>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
    <script>
        $('#searchText').on('keyup',function(){
            $.ajax({
                type: 'GET',
                async: false,
                url: "http://api.bing.com/qsonhs.aspx?type=cb&cb=callbackfunction&q=" + $('#searchText').val(),
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'callbackfunction',
                success: function(data){
                    console.log(data);
                    suggest(data);
                },
                error: function(data){
                    console.log('e',data.status);
                }
            })
        });

        function suggest(data){
            if(data.AS.FullResults){
                var d = data.AS.Results[0].Suggests;
                var suggestLi = '';
                for(var i=0;i<d.length;i++){
                    suggestLi += '<li>' + d[i].Txt + '</li>'
                }
                $('#suggest').html(suggestLi);
                $('#suggest').show();
            }else{
                $('#suggest').hide();
            }
        };

        $('#suggest').on('click','li',function(e){
            location.href = 'https://www.bing.com/search?q=' + $(e.target).html();
        });

        $(document).on('click',function(){
            $('#suggest').hide();
        });

        $('#searchText').on('click',function(e){
            e.stopPropagation();
        });
    </script>
</html>

二、JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #333;
        }
        #bg-div{
            position: relative;
            text-align: center;
            margin: 0 auto;
            height: 690px; 
            width: 1228px;
            background: url(http://img.mukewang.com/52da5e7d0001c0f813660768.jpg);
        }
        .logo{
            float:left;
            background: url(http://img.mukewang.com/52da5e530001eea901070053.jpg) no-repeat;
            margin: -4px 18px 0 0;
            height: 53px;
            width: 107px;
        }
        .search-warp{
            float:left;
            background-color:#fff;
            width:407px;
            padding:5px;
        }
        #search-input{
            float:left;
            border: 0;
            font-size: 100%;
            width: 375px;
            outline: none;
            height:29px;
            line-height:29px;
        }
        .search-submit{
            float:left;
            cursor: pointer;
            height: 29px;
            width: 29px;
            background: transparent url(http://img.mukewang.com/52da5df800012b1e02220137.jpg) no-repeat -30px -107px;
            border: 0;
        }
        #search-box{
            position:absolute;
            top:20%;
            left:8%;
        }

        #suggest {
            position: absolute;
            display: none;
            background: #FFF;
            width: 415px;
            border: 1px solid #CCC;
        }

        #suggestResult {
            list-style: none;
            line-height: 29px;
            color: #999;
        } 

        #suggestResult li:hover{
            background: #eee;
            text-decoration: underline;
        }
    </style>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
    <script>
        function callbackFunction(data){
            console.log(data);
            var html = '';
            var d = data.AS.Results[0].Suggests;
            for(var i=0;i<d.length;i++){
                html += '<li>'+d[i].Txt+'</li>'
            }
            var suggestResult = document.getElementById('suggestResult');
            suggestResult.innerHTML = html;
            var suggest = document.getElementById('suggest');
            suggest.style.left = document.getElementById('search-box').offsetLeft + document.getElementById('bg-div').offsetLeft + 125 + 'px';
            suggest.style.top = document.getElementById('search-box').offsetTop + 39 + 'px'; 
            suggest.style.display = 'block';
        }

        window.onload = function(){
            var search = document.getElementById('search-input');
            search.onkeyup = function(){
                console.log('dian')
                var script = document.createElement('script');
                var searchText = search.value;
                if(searchText == ''){
                    var suggest = document.getElementById('suggest');
                    suggest.style.display = 'none';
                }else{
                    script.src = 'http://api.bing.com/qsonhs.aspx?type=cb&cb=callbackFunction&q=' + searchText;
                    document.getElementsByTagName('head')[0].appendChild(script);
                }
            }
            search.onclick = function(event){
                if(event.stopPropagation){
                    event.stopPropagation();
                }else{
                    event.cancelBubble = true;
                }
            }
            var suggest = document.getElementById('suggest');
            suggest.onclick = function(event){
                var searchTarget = event.target.innerHTML;
                location.href = 'https://www.bing.com/search?q=' + searchTarget;
            }

        }

        document.onclick = function(){
            var suggest = document.getElementById('suggest');
            suggest.style.display = 'none';
        }

    </script>
</head>
<body>
    <div id="bg-div">
    <div id="search-box">
        <div class="logo"></div>
        <form action="https://www.bing.com/search" target="_blank" method="get" class="search-warp">
                <input id="search-input" type="text" name="q">
                <input class="search-submit" type="submit" value=""/>
        </form>
    </div>
    </div>
    <div id='suggest'>
        <ul id='suggestResult'></ul>
    </div>
</body>
</html>

 

posted @ 2017-05-16 17:29  oliverlht  阅读(211)  评论(0)  编辑  收藏  举报