使用jQuery、js实现必应搜索制作

最新推荐文章于 2021-07-04 21:06:16 发布

葡萄干是个程序员

最新推荐文章于 2021-07-04 21:06:16 发布

阅读量1.7k

点赞数 1

分类专栏： Web前端文章标签： Javascript jquery bing 搜索跨域

本文链接：https://blog.csdn.net/qq_15096707/article/details/50646955

版权

Web前端专栏收录该内容

107 篇文章 2 订阅

订阅专栏

实现过程参考自慕课网，有关具体详情可参考视频。

实现必应搜索制作，结果如下：

点击提示框中的选项进行对应的跳转（在当前页面）：

使用Ajax提交http请求，从必应获取提示数据。在使用Ajax请求时，需要注意：Ajax发送请求的url地址与服务器地址必须是同一域名下。为了处理这里出现的跨域问题，采用jsonp方式（jsonp可用于解决主流浏览器的跨域数据访问的问题）。

使用 jQuery 实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery制作Bing搜索框-v2.0</title>

    <!-- 兼容性视图 -->
    <!-- 浏览器的文档模式是以最新版本的IE的文档模式来渲染的 -->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <style>
        body {
            background-color: #333;
        }

        .bg-div {
            width: 1228px;
            height: 690px;
            margin: 0 auto;
            background-image: url(images/river.jpg);
            position: relative;
        }

        .logo {
            width: 107px;
            height: 53px;
            background-image: url(images/logo.png);

            float: left;

            margin: -4px 18px 0 0;
        }

        form {
            float: left;
            background-color: #fff;
            padding: 5px;
        }

        .search-text {
            border: 0;
            float: left;

            height: 25px;
            line-height: 25px;

            outline: none; /* 去除轮廓 */

            width: 350px;
        }

        .search-button {
            border: 0;

            width: 29px;
            height: 29px;
            background-image: url(images/search-button.png);

            float: left;
        }

        .search-box {
            position: absolute;
            top: 200px;
            left: 300px;
        }

        /* 搜索提示 */
        .suggest {
            width: 388px;
            background-color: #fff;
            border: 1px solid #999;
        }

        .suggest ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .suggest ul li {
            padding: 3px;
            font-size: 14px;
            line-height: 25px;
            cursor: pointer;
        }

        .suggest ul li:hover {
            background-color: #e5e5e5;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div class="bg-div">
    <div class="search-box">
        <div class="logo"></div>
        <form class="search-form" action="https://cn.bing.com/search" id="search-form">
            <input type="text" class="search-text" name="q" id="search_input" autocomplete="off">
            <input type="submit" value="" class="search-button">
        </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="jquery.min.js"></script>-->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>
    $('#search_input').bind("keyup", function() {
        // 如： http://api.bing.com/qsonhs.aspx?q=2&o=a+ds+ds+h+p
        var jqueryInput = $(this);
        var searchText = jqueryInput.val();

        // 为解决js同源策略出现的问题，进行修改
        /*$.get('http://api.bing.com/qsonhs.aspx?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({
                position: "absolute",
                top: $('#search-form').offset().top + $('#search-form').height() + 10,
                left: $('#search-form').offset().left
            });

        }, 'json');*/

        if(searchText) {
            $.ajax({
                type:"GET",
                url:"http://api.bing.com/qsonhs.aspx?type=cb&q="+searchText,
                dataType:'jsonp',
                jsonp:'cb',
                success: 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({
                        position: "absolute",

                        // offset().top 取得元素距浏览器顶部的距离（除工具栏）
                        // offset().left 取得元素距浏览器左边的距离
                        top: $('#search-form').offset().top + $('#search-form').height() + 10,
                        left: $('#search-form').offset().left
                    });
                },
                error: function() {
                    console.log("error");
                }
            });
        } else {
            $('#search-suggest').hide();
        }
    });

    //点击空白处，提示框消失
    $(document).bind('click', function() {
        $("#search-suggest").hide();
    });

    //为多个元素且由javascript动态生成的元素添加事件时使用事件代理
    // 为动态生成的提示框中的“li”使用事件代理
    /*$(document).delegate('#search-suggest li','click', function() {
        var keyword = $(this).text();
        location.href = 'http://cn.bing.com/search?q='+keyword;
    });*/

    //delegate 已经不建议使用了，推荐使用 $(document).on('click','li',function (){});
    $(document).on('click', '#search-suggest li', function() {
        var keyword = $(this).text();
        location.href = 'http://cn.bing.com/search?q='+keyword;
    });
</script>
</body>
</html>

可参考：处理跨域： http://blog.csdn.net/zhouyusong_bupt/article/details/49493495

使用javascript实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用javascript制作Bing搜索框-v2.0</title>

    <!-- 兼容性视图 -->
    <!-- 浏览器的文档模式是以最新版本的IE的文档模式来渲染的 -->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <style>
        body {
            background-color: #333;
        }

        .bg-div {
            width: 1228px;
            height: 690px;
            margin: 0 auto;
            background-image: url(images/river.jpg);
            position: relative;
        }

        .logo {
            width: 107px;
            height: 53px;
            background-image: url(images/logo.png);

            float: left;

            margin: -4px 18px 0 0;
        }

        form {
            float: left;
            background-color: #fff;
            padding: 5px;
        }

        .search-text {
            border: 0;
            float: left;

            height: 25px;
            line-height: 25px;

            outline: none; /* 去除轮廓 */

            width: 350px;
        }

        .search-button {
            border: 0;

            width: 29px;
            height: 29px;
            background-image: url(images/search-button.png);

            float: left;
        }

        .search-box {
            position: absolute;
            top: 200px;
            left: 300px;
        }

        /* 搜索提示 */
        .suggest {
            width: 388px;
            background-color: #fff;
            border: 1px solid #999;
        }

        .suggest ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .suggest ul li {
            padding: 3px;
            font-size: 14px;
            line-height: 25px;
            cursor: pointer;
        }

        .suggest ul li:hover {
            background-color: #e5e5e5;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div class="bg-div">
    <div class="search-box">
        <div class="logo"></div>
        <form class="search-form" action="https://cn.bing.com/search" id="search-form">
            <input type="text" class="search-text" name="q" id="search_input" autocomplete="off">
            <input type="submit" value="" class="search-button">
        </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>
    var getDOM = function(id) {
        return document.getElementById(id);
    };

    // 添加事件
    var addEvent = function(id, event, fn) {
        var el = getDOM(id) || document;
        if(el.addEventListener) {
            el.addEventListener(event, fn, false);
        } else if(el.attachEvent) {
            el.attachEvent('on'+evevt, fn);
        } else {
            el['on'+event] = fn;
        }
    };

    // offsetLeft 属性是获取元素距父元素左边的距离，同理offsetTop。
    // 为获取元素距浏览器左边的距离，自定义函数 getElementLeft，而在jQuery使用 offset().left 方法即可。
    var getElementLeft = function(element) {
        var actualLeft = element.offsetLeft;
        var current = element.offsetParent;

        while(current != null) {
            actualLeft += current.offsetLeft;
            current = current.offsetParent;
        }
        return actualLeft;
    };

    //同 getElementLeft 函数，自定义 getElementTop 函数
    var getElementTop = function(element) {
        var actualTop = element.offsetTop;
        var current = element.offsetParent;

        while(current != null) {
            actualTop += current.offsetTop;
            current = current.offsetParent;
        }
        return actualTop;
    };

    var ajaxGet = function(url, callback) {
        var xhr = null;
        if(window.XMLHttpRequest) {
            xhr = new window.XMLHttpRequest();
        } else if(window.ActiveXObject) {
            xhr = new window.ActiveXObject();
        }
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4 && xhr.status == 200) {
                callback(JSON.parse(xhr.responseText));
            }
        };
        xhr.open('get',url,true);
        /* open(method,url,async)
        规定请求的类型、URL 以及是否异步处理请求。
        method：请求的类型；GET 或 POST
        url：文件在服务器上的位置
        async：true（异步）或 false（同步）*/
        xhr.send();
    };

    addEvent('search_input','keyup', function() {
        var searchText = getDOM('search_input').value;
        if(searchText) {
            ajaxGet("http://api.bing.com/qsonhs.aspx?type=cb&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>';
                }

                var ss = getDOM('search-suggest');
                ss.innerHTML = html;
                ss.style.top = getElementTop(getDOM('search-form')) + 38 + 'px';
                ss.style.left = getElementLeft(getDOM('search-form')) + 'px';
                ss.style.position = 'absolute';
                ss.style.display = 'block';
            });
        } else {
            getDOM('search-suggest').style.display = 'none'
        }
    });
    //为解决js同源策略问题，需要修改上面代码

    //为JS动态生成的网页元素添加入事件时，通常需要使用事件代理来实现
    var delegateEvent = function(target, event, fn) {
        addEvent(document, event, function(e) {
            if(e.target.nodeName == target.toUpperCase()) {
                fn.call(e.target);
            }
        });
    };
    delegateEvent('li', 'click', function() {
        var keyword = this.innerHTML;
        location.href = 'http://cn.bing.com/search?q='+keyword;
    });

    addEvent("", "click", function() {
        getDOM('search-suggest').style.display = 'none';
    });
</script>
</body>
</html>

在控制台进行测试，出现：

修改：解决跨域问题

<script>
    var getDOM = function(id) {
        return document.getElementById(id);
    };

    // 添加事件
    var addEvent = function(id, event, fn) {
        var el = getDOM(id) || document;
        if(el.addEventListener) {
            el.addEventListener(event, fn, false);
        } else if(el.attachEvent) {
            el.attachEvent('on'+evevt, fn);
        } else {
            el['on'+event] = fn;
        }
    };

    // offsetLeft 属性是获取元素距父元素左边的距离，同理offsetTop。
    // 为获取元素距浏览器左边的距离，自定义函数 getElementLeft，而在jQuery使用 offset().left 方法即可。
    var getElementLeft = function(element) {
        var actualLeft = element.offsetLeft;
        var current = element.offsetParent;

        while(current != null) {
            actualLeft += current.offsetLeft;
            current = current.offsetParent;
        }
        return actualLeft;
    };

    //同 getElementLeft 函数，自定义 getElementTop 函数
    var getElementTop = function(element) {
        var actualTop = element.offsetTop;
        var current = element.offsetParent;

        while(current != null) {
            actualTop += current.offsetTop;
            current = current.offsetParent;
        }
        return actualTop;
    };

    //为解决js同源策略问题，修改上面代码
    var ajaxGet = function(url) {
        var JSONP = document.createElement("script");
        JSONP.src = url;
        document.getElementsByTagName("body")[0].appendChild(JSONP);
    };

    var callback = function(d) {

        if(d.AS.Results) {
            d = d.AS.Results[0].Suggests;
        }

        var html = '';
        for(var i = 0; i < d.length; i++) {
            html += '<li>' + d[i].Txt + '</li>';
        }

        getDOM('search-result').innerHTML = html;
        var ss = getDOM('search-suggest');
        ss.style.top = getElementTop(getDOM('search-form')) + 38 + 'px';
        ss.style.left = getElementLeft(getDOM('search-form')) + 'px';
        ss.style.position = 'absolute';
        ss.style.display = 'block';

        var jsonp = document.getElementsByTagName('body')[0].getElementsByTagName('script');
        if(jsonp) {
            for(var i = 1; i < jsonp.length; i++) {
                if(jsonp[i]) {
                    jsonp[i].parentNode.removeChild(jsonp[i]);
                    //console.log(jsonp[i]);
                }
            }
        }
    };

    //为JS动态生成的网页元素添加入事件时，通常需要使用事件代理来实现
    var delegateEvent = function(target, event, fn) {
        addEvent(document, event, function(e) {
            if(e.target.nodeName == target.toUpperCase()) {
                fn.call(e.target);
            }
        });
    };

    addEvent('search_input', 'keyup', function() {
        var searchText = getDOM('search_input').value;
        if(searchText) {
            ajaxGet("http://api.bing.com/qsonhs.aspx?type=cb&cb=callback&q="+searchText);
        } else {
            getDOM('search-suggest').style.display = 'none';
        }
    });

    delegateEvent('li', 'click', function() {
        var keyword = this.innerHTML;
        location.href = 'http://cn.bing.com/search?q='+keyword;
    });

    addEvent("", "click", function() {
        getDOM('search-suggest').style.display = 'none';
    });
</script>

葡萄干是个程序员

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery、js实现必应搜索制作

实现过程参考自慕课网，有关具体详情可参考视频。实现必应搜索制作，结果如下：点击提示框中的选项进行对应的跳转（在当前页面）：使用Ajax提交http请求，从必应获取提示数据。在使用Ajax请求时，需要注意：Ajax发送请求的url地址与服务器地址必须是同一域名下。为了处理这里出现的跨域问题，采用jsonp方式（jsonp可用于解决主流浏览器的跨域数据
复制链接

扫一扫

专栏目录