<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="Author" content="Fly">
        <style type='text/css'>
            *{ margin:0; padding:0; font-family:Microsoft yahei,serif;}
            #box{width: 300px;margin: 100px auto;}
            #search{width: 298px;height: 38px;border: 1px solid #ccc;font-size: 14px;text-indent:5px;color: #222;}
            #list{width: 298px;border: 1px solid #ccc;border-top: none;display: none;}
            #list li{height: 25px;line-height: 25px;text-indent: 10px;font-size: 14px;list-style:none;cursor: pointer;overflow: hidden;width: 100%;}
            #list li a{display: block;width: 100%;height: 100%;color: #555;text-decoration:none;}
            #list li.hover{}
        </style>
    </head>
    <body>
        <div id="box">
            <input type="text" id="search"><ul id="list"><!--<li>111</li>--><!--<li>222</li>--><!--<li>333</li>--><!--<li>444</li>--><!--<li>555</li>--></ul>
        </div>
        <script>
            var oInp = document.getElementById('search');
            var oList = document.getElementById('list');
            var index = -1 , startVal = '';

            oInp.onkeyup = function (e) {
                var val = this.value;
                if (val){
                    e = e || window.event;
                    var keyCode = e.keyCode;
                    if (keyCode === 38 || keyCode === 40){
                        var aLi = oList.children;
                        var length = aLi.length;
                        if (keyCode===38){
                            index --;
                            if (index<-1)index = aLi.length -1;
                        }else{
                            index ++;
                            if (index>length-1)index = -1;
                        }
                        for (var j=0;j<length;j++){
                            aLi[j].className = '';
                        }
                        if (index !== -1){
                            this.value = aLi[index].children[0].innerText;
                            aLi[index].className = 'hover';
                        }else{
                            console.log(startVal);
                            this.value = startVal;
                        }
                        return false;
                    }else if (keyCode === 13){
                        window.open('https://www.baidu.com/s?wd='+val , '_blank');
                        this.blur();
                    }else{
                        startVal = val;
                        addScript.call(this,val);
                    }
                }else{
                    oList.innerHTML = '';
                }
            };
            oInp.onblur = function () {
                setTimeout(function () {
                   oList.style.display = 'none';
                },200);
            };
            oInp.onfocus = function () {
                oList.style.display = 'block';
                if (this.value)addScript.call(this,this.value);
            };

            function addScript(val) {
                var oS = document.createElement('script');
                oS.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+ val +'&cb=fly&_='+new Date().getTime();
                document.body.appendChild(oS);
                oS.onload = function () {
                    document.body.removeChild(this);
                };
            }
            function fly(mJson) {
                var s = mJson.s;
                var length = Math.min(s.length , 5);
                oList.innerHTML = '';
                for (var i=0;i<length;i++){
                    var oLi = document.createElement('li');
                    oLi.innerHTML = '<a href="https://www.baidu.com/s?wd='+ s[i] +'" target="_blank">' +s[i]+ '</a>';
                    oLi.onmouseenter = function () {
                        for (var j=0;j<length;j++){
                            this.parentNode.children[j].className = '';
                        }
                        this.className = 'hover';
                    };
                    oLi.onmouseleave = function () {
                        this.className = '';
                    };
                    oList.appendChild(oLi);
                }
            }
        </script>
    </body>
</html>

jsonp跨域实例丨利用百度数据制作搜索页面的更多相关文章

  1. jsonp跨域实例

    一.什么是跨域 二.如何解决跨域 1.前端常用 JSONP 2.服务器端配置 HTTP 协议的 header 解析 三.JSONP实现的实例 <!DOCTYPE html> <htm ...

  2. 使用jsonp跨域请求后可以获得数据，但是进入error方法，返回parseerror

    $.ajax({ url:url, dataType:'jsonp', jsonp: 'callback',//回调函数名字 jsonpCallback: 'success_jsonpCallback ...

  3. Jsonp跨域访问原理和实例

    >>什么是跨域 出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,当前域名的js只能读取同域下的窗口属性,即同源策略.而跨域就是通过某些手段来绕过同源策略限制,实 ...

  4. JSONP跨域jQuery处理整理（附天气数据实例）

    写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨 ...

  5. jsonp跨域获取数据实现百度搜索

    本菜鸡最近在写某个页面请求数据时,报了如下的错误. Failed to load https://...:No 'Access-Control-Allow-Origin' header is pres ...

  6. jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...

  7. JSONP跨域访问百度实现搜索提示小案例

    一.JSONP简介 JSONP 全称 JSON with padding(填充式 JSON 或参数式 JSON),JSONP实现跨域请求的原理,就是动态创建<script>标签,然后利用& ...

  8. 通用jsonp跨域技术获取天气数据

    1. 前言 在进行网站开发的过程中经常会用到第三方的数据,但是由于同源策略的限制导致ajax不能发送请求,因此也无法获得数据.解决ajax的跨域问题可以使用jsonp技术 2.代码 <!DOCT ...

  9. 跨域漏洞丨JSONP和CORS跨域资源共享

    进入正文之前,我们先来解决个小问题,什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 跨域常见的两种方式,分别是JSONP和CORS. 今天i ...

随机推荐

  1. 图论：Tarjan算法

    在有向图中,若两点至少包含一条路径可以到达,则称两个顶点强连通,若任意两个顶点皆如此,则称此图为强联通图.非强连通图有向图的极大强连通子图,称为强连通分量(strongly connected com ...

  2. oracle之dbms_output

    oracle的dbms_output oracle的dbms_output的两个小问题 .如果dbms_output.put_line的内容不能显示,需要在命令行中先敲入set serveroutpu ...

  3. MVC权限验证过滤器

    Action属性,权限设定属性   [AttributeUsage(AttributeTargets.Method, Inherited = true, AllowMultiple = false)] ...

  4. 聊聊高并发（十八）理解AtomicXXX.lazySet方法

    看过java.util.concurrent.atomic包里面各个AtomicXXX类实现的同学应该见过lazySet方法.比方AtomicBoolean类的lazySet方法 public fin ...

  5. C#中结构struct的使用

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. pix格式的一些摸索

    作者:朱金灿 来源:http://blog.csdn.net/clever101 以前因为工作关系研究过PCI的系统格式pix,但是遗留了一些问题,最近又想重新解决这些问题.研究了一天,有些收获,但是 ...

  7. Android WebView页面加载优化

    目前webapp越来越多,体验也越来越好,为了能够更好的使用WebView展示出流畅的的页面,可以从以下几点做优化: WebView缓存 资源文件本地存储 减少耗时操作 客户端UI优化 可能有人会说了 ...

  8. tortoisegit--无法commit

    tortoisegit--无法提交,好几次使用tortoisegit,commit的时候出现卡死的情况,导致无法提交代码. 分析错误以为是: 电脑的性功能有关,但重启好几次电脑一人无济于事,打开任务管 ...

  9. BZOJ4712: 洪水(树链剖分维护Dp)

    Description 小A走到一个山脚下,准备给自己造一个小屋.这时候,小A的朋友(op,又叫管理员)打开了创造模式,然后飞到 山顶放了格水.于是小A面前出现了一个瀑布.作为平民的小A只好老实巴交地 ...

  10. ip---查看网络信息

    Linux的ip命令和ifconfig类似,但前者功能更强大,并旨在取代后者. ifconfig属于net-tools.ip属于iproute2 设置一个IP地址,可以使用下列ip命令: ip add ...