<!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. 访问 IIS 元数据库失败 解决办法

    装了VS2005再装IIS,结果出了些小问题访问IIS元数据库失败思考可能是次序出了问题,解决 1.打开CMD,进入 C:\WINDOWS\Microsoft.NET\Framework\v2.0.5 ...

  2. 如何形象的解释 webhook 这个词

    就是一个 callback,只不过 callback 的操作是发送指定的 HTTP request 给一个指定的地址. callback 就是由甲传给乙,乙处理完之后通知甲传过来的方法或者请求甲方的 ...

  3. UI标签库专题九：JEECG智能开发平台 Choose(选则操作标签)

     1. Choose(选则操作标签) 1.1. 參数 属性名 类型 描写叙述 是否必须 默认值 hiddenName string 隐藏域的ID 否 null hiddenid string 隐藏 ...

  4. Python命令行參数大全

      -b     :    当转换数组为字符串时提出警告.比方str(bytes_instance), str(bytearray_instance). -B     :    当导入.py[co]文 ...

  5. C++语言笔记系列之十三——派生类构造函数的调用

    1.派生类构造函数的调用 (1)一个基类的全部数据成员均被派生类继承.创建一个派生类对象时.系统在为派生类对象分配单元时一定要为其基类数据成员分配子空间. (2)一个派生类对象在创建时不仅要调用派生类 ...

  6. Razor数组数据

    控制器层 public ActionResult DemoArray() { Product[] array = { new Product {Name = "Kayak", Pr ...

  7. elasticsearch index 之 create index（-）

    从本篇开始,就进入了Index的核心代码部分.这里首先分析一下索引的创建过程.elasticsearch中的索引是多个分片的集合,它只是逻辑上的索引,并不具备实际的索引功能,所有对数据的操作最终还是由 ...

  8. Kinect 开发 —— Kinect Interaction 交互控件

    Kinect Interactions 提供了一些新的带有姿势识别的控件如 push-to-press 按钮, grip-to-pan 列表控件, 而且支持多用户,同时二个人进行的交互,这些新添加的控 ...

  9. 【Django】序列化

    Django中序列化主要应用于将数据库中检索的数据返回给客户端用户,特别是Ajax请求一般返回为Json格式. * 1.from django.core import serializers** fr ...

  10. 【Django】AJAX

    目录 JSON 序列化 stringify 反序列化 parse JSON与XML对比 AJAX简介 AJAX常见应用场景 jQuery实现AJAX JS实现AJAX AJAX请求设置csrf_tok ...