<!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. Linux常用视频播放器

    1.SMplayer是一款跨平台的视频播放工具,可以支持大部分的视频和音频文件.它支持音频轨道切换.允许调节亮度.对比度.色调.饱和度.伽玛值,按照倍速.4倍速等多种速度回放.还可以进行音频和字幕延迟 ...

  2. 紫书 习题 10-16 UVa 1647 (高精度+递推）

    这道题我已经推出00和1过两步变成00了,可我没有继续做下去-- 后来看了博客发现自己已经做了90%了-- 可惜了,以后不要轻易放弃. 1的个数有个规律,就是每次都乘以2,因为0和1下一步都会变出1 ...

  3. ORACLE遞歸查詢

    ORACLE支持常規的用CTE遞歸的方式實現遞歸查詢,也有自己特有的查詢方式,ORACLE文檔中叫層次數據查詢. 這裏通過一個簡單的样例來介紹這兩種查詢方式. 數據準備: CREATE TABLE T ...

  4. androidclient和站点数据交互的实现（基于Http协议获取数据方法)

    androidclient一般不直接訪问站点数据库,而是像浏览器一样发送get或者post请求.然后站点返回client能理解的数据格式,client解析这些数据.显示在界面上.经常使用的数据格式是x ...

  5. julia/pyplot 绘图加入标签和标题

    julia 调用matplotlib.pyplot 须要先using pycall 先安装pycall Pkg.add("PyCall") 然后吧. . . 上代码把:(应该是通俗 ...

  6. 最小生成树-并查集-Kruskal-zoj-2048-special judge

    Highways description The island nation of Flatopia is perfectly flat. Unfortunately, Flatopia has a ...

  7. 设置select组件中的默认值

    会员卡类型   <select id="name2" style="width:140px"> <option value="Ak& ...

  8. 洛谷P2192 HXY玩卡片

    题目描述 HXY得到了一些卡片,这些卡片上标有数字0或5.现在她可以选择其中一些卡片排成一列,使得排出的一列数字组成的数最大,且满足被90整除这个条件.同时这个数不能含有前导0,即0不能作为这串数的首 ...

  9. 轻松八步搞定Cacti配置安装（原创视频）

    轻松八步搞定Cacti配置安装 1.安装web server $sudo apt-get install apache2 验证 http://localhost 2.$sudo apt-get ins ...

  10. GridDataView实现 点击任意一格可以修改

    直接上代码好了 private void dgv1Member_CellDoubleClick(object sender, DataGridViewCellEventArgs e) { string ...