<!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. HTTP 协议基础及发展历史

    一. 5层网络模型介绍 低三层 物理层:主要作用是定义物理设备如何传输数据. 数据链路层:在通信的实体间建立数据链路连接. 网路层:为数据在结点之间传输创建逻辑链路. 传输层: 想用户提供可靠的端到端 ...

  2. boost.property_tree的高级用法（你们没见过的操作）

    版权声明:本文为博主原创文章,未经博主允许不得转载. 前一阵写项目,终于将这个boost下的xml读取类完成了,由于网上对property_trees的讲解很少,最多也就到get_child这个层面, ...

  3. Oracle的表空间和sqlplus

    1.  表空间的概念 曾经接触过的数据库都没有听到过表空间这个词,在前一段时间看到Oracle数据库的时候发现表空间无处不在. 所以表空间在Oracle数据库中应该是一个非经常常使用而且非常重要的概念 ...

  4. BZOJ 刷题记录 PART 5

    拖了好久才写的. [BZOJ2821]接触分块大法.这道题略有点新颖.首先我们先分块.然后统计每块中每一个数出现的个数. 以下是联立各个方块,预处理出第I个方块到第J个方块出现正偶数次数的个数. fo ...

  5. mysql_jdbc

    package com.lovo.day18_jdbc1; import java.sql.Connection; import java.sql.DriverManager; import java ...

  6. php 内置的 html 格式化/美化tidy函数 -- 让你的HTML更美观

    php 内置的 html 格式化/美化tidy函数 https://github.com/htacg/tidy-html5 # HTML 格式化 function beautify_html($htm ...

  7. window cmd 命令大全 （order）

    Windows CMD命令大全 命令简介 cmd是command的缩写.即命令行 . 运行操作 CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本.文件系统 ...

  8. POJ 3039 搜索？？？ （逼近）

    思路: 抄的题解 这叫搜索? 难以理解 我觉得就是枚举+逼近 //By SiriusRen #include <cmath> #include <cstdio> #includ ...

  9. K短路 spfa + A*

    #include <stdio.h> #include <string.h> #include <queue> #include <algorithm> ...

  10. nice---进程优先级

    在当前程序运行优先级基础之上调整指定值得到新的程序运行优先级,用新的程序运行优先级运行命令行"command [arguments...]".优先级的范围为-20 - 19 等40 ...