<!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. 轻量级记事本工具：CintaNotes

    本片文章介绍CintaNotes小工具 功能介绍: 方便.快捷的记录笔记: 快捷地从任何地方等截取内容生成笔记: 高效的记事本内容查询: 轻松的标签管理 支持移动设备和电脑同步(估计要收费) 官网下载 ...

  2. 如何在VMware中创建虚拟机

    今天给大家分享如何在VMware中创建虚拟机,具体的教程如下.在这里小编提前下载了Ubuntu14.04桌面系统,为后面在虚拟机中安装Ubuntu14.04桌面系统做准备. 1.从官网上或者直接百度上 ...

  3. 昼猫笔记 -- 面向对象(II) - 继承

    继承 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念. 所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现,还有就是js可以 ...

  4. linux安装lrzsz支持rz从windows上传文件到linux

    1.下载lrzsz wget https://wangxuejin-data-1252194948.cos.ap-shanghai.myqcloud.com/lrzsz-0.12.20.tar.gz ...

  5. 紫书 例题 9-10 UVa 1626 (区间dp + 输出技巧）

    当前区间f(i, j)分两种情况,一种是s[i]于s[j]符合要求,那么可以转移到f[i + 1][j - 1] 这样答案只会更小或者相等 第二种是直接分成两个部分, 即f[i][j] = f[i][ ...

  6. 多个ComboBox绑定同一个数据源出现的问题解决办法

    出现问题: 当多个ComboBox绑定同一个数据源后,只要更改其中一个的选择项时,其它的ComboBox也跟着改变了 解决办法: DataTable dt = new DataTable(); dt ...

  7. 为SSD编程（4）——高级功能和内部并行

    原文 http://codecapsule.com/2014/02/12/coding-for-ssds-part-4-advanced-functionalities-and-internal-pa ...

  8. CSS动态实现文本框清除按钮的隐藏与显示

    当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input框尺寸不太好控制(padding无视):FireFox浏览器貌似任何类型的输入框都无动于衷 ...

  9. BZOJ 高精度开根 JAVA代码

    晓华所在的工作组正在编写一套高精度科学计算的软件,一些简单的部分如高精度加减法.乘除法早已写完了,现在就剩下晓华所负责的部分:实数的高精度开m次根.因为一个有理数开根之后可能得到一个无理数,所以这项工 ...

  10. pyspark使用

    1.安装python3 2.idea安装Python插件 3.下载spark,设置SPARK_HOME环境变量 4.安装pyspark,numpy 5.运行pyspark应用 pyspark应用如果使 ...