<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

         * {

             margin: ;

             padding: ;

         }

         #wrap {

             width: 400px;

             margin: 50px auto;

         }

         #wrap input {

             width: 380px;

             height: 38px;

             border: # 1px solid;

             padding:  9px;

         }

         #wrap ul {

             border: # 1px solid;

             width: 398px;

             height: auto;

             padding: ;

             overflow: hidden;

         }

         #wrap ul li {

             list-style: none;

             width: 380px;

             padding:  9px;

             height: 30px;

             border-bottom: # 1px solid;

             line-height: 30px;

         }

         #wrap ul li.on {

             background: #c00;

             color: #fff;

         }

     </style>

     <script>

         function jsonP(json) {

             if (!json.url) {

                 alert('请输入正确的请求路径');

                 return;

             }

             json.data = json.data || {};

             json.cbName = json.cbName || 'cb';

             var fnName = 'show' + Math.random();

             fnName = fnName.replace('.', '');

             window[fnName] = function (json2) {

                 json.success && json.success(json2);

                 oHead.removeChild(oScript);

             };

             json.data[json.cbName] = fnName;

             var arr = [];

             for (var name in json.data) {

                 arr.push(name + '=' + json.data[name]);

             }

             var oScript = document.createElement('script');

             oScript.src = json.url + '?' + arr.join('&');

             var oHead = document.getElementsByTagName('head')[];

             oHead.appendChild(oScript);

         }

         window.onload = function () {

             var oTxt = document.getElementById('txt');

             var oBox = document.getElementById('box');

             var iNow = -;

             var oldValue;

             oTxt.onkeyup = function (ev) {

                 var oEvent = ev || event;

                 if(oEvent.keyCode !=  && oEvent.keyCode !=  && oEvent.keyCode != ){

                     jsonP({

                         url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',

                         data: {

                             wd: oTxt.value

                         },

                         success: function (json) {

                             var arr = json.s;

                             for (var i = ; i < arr.length; i++) {

                                 var oLi = document.createElement('li');

                                 oLi.innerHTML = arr[i];

                                 oBox.appendChild(oLi);

                             }

                             var aLi = oBox.children;

                             for (var i = ; i < aLi.length; i++) {

                                 aLi[i].index = i;

                                 aLi[i].onmouseover = function () {

                                     iNow = this.index;

                                     for (var i = ; i < aLi.length; i++) {

                                         aLi[i].className = '';

                                     }

                                     this.className = 'on';

                                     oTxt.value = this.innerHTML;

                                 };

                             }

                         }

                     });

                     oldValue = oTxt.value;

                 }

             };

             oTxt.onkeydown = function (ev) {

                 var oEvent = ev || event;

                 var aLi = oBox.children;

                 if(oEvent.keyCode == ){

                     iNow++;

                     if(iNow == aLi.length){

                         iNow = -;

                     }

                     for(var i = ; i < aLi.length; i++){

                         aLi[i].className = '';

                     }

                     if(iNow == -){

                         oTxt.value = oldValue;

                     }else{

                         aLi[iNow].className = 'on';

                         oTxt.value = aLi[iNow].innerHTML;

                     }

                 }

                 if(oEvent.keyCode == ){

                     iNow--;

                     if(iNow == -)iNow = aLi.length - ;

                     for(var i = ; i < aLi.length; i++){

                         aLi[i].className = '';

                     }

                     if(iNow == -){

                         oTxt.value = oldValue;

                     }else{

                         aLi[iNow].className = 'on';

                         oTxt.value = aLi[iNow].innerHTML;

                     }

                     return false;

                 }

                 if(oEvent.keyCode == ){

                     window.open('https://www.baidu.com/s?wd=' + oTxt.value);

                 }

             }

         }

     </script>

 </head>

 <body>

 <div id="wrap">

     <input type="text" id="txt">

     <ul id="box">

     </ul>

 </div>

 </body>

 </html>

jsonp跨域&百度下拉的更多相关文章

  1. angular的跨域（angular百度下拉提示模拟）和angular选项卡

    1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...

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

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

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

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

  4. vue的jsonp百度下拉菜单

    通过vue的jsonp实现百度下拉菜单的请求,vue的版本是2.9.2 <!DOCTYPE html> <html lang="en"> <head& ...

  5. 计算机网络之JSONP跨域

    JSONP跨域实现原理 百度联想词跨域实现 一.JSONP跨域实现原理 1.Web页面使用<script>引入JS文件时不受同源策略的影响.准确的说,所有拥有src属性的标签都不受同源策略 ...

  6. 前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  7. jsonp跨域+ashx（示例）

    前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件,这时候就访问不了.关于jsonp ...

  8. Jsonp跨域访问

    很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...

  9. jsonp 跨域请求

    背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...

随机推荐

  1. 关于RN热更新-iOS端捕获加载jsbundle异常解决方案

    1.监听加载jsbundle异常的处理 模拟情况:合并增量后jsbundle文件出现部分错误调试发现当加载jsbundle出现异常时,RN模块RCTBatchedBridge.m中如下代码会执行: - ...

  2. KVO - 观察自定义属性值

    1 . 声明属性&注册监听 { BOOL isOk; } [self addObserver:self forKeyPath:@"isOk" options:0 conte ...

  3. Wormholes 虫洞 BZOJ 1715 spfa判断负环

    John在他的农场中闲逛时发现了许多虫洞.虫洞可以看作一条十分奇特的有向边,并可以使你返回到过去的一个时刻(相对你进入虫洞之前).John的每个农场有M条小路(无向边)连接着N (从1..N标号)块地 ...

  4. js 原生JS实现轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. feign调用过程注意事项

    Feign是Netflix开发的声明式.模板化的HTTP客户端, Feign可以帮助我们更快捷.优雅地调用HTTP API. 在Spring Cloud中,使用Feign非常简单——创建一个接口,并在 ...

  6. Visual Studio 2019 秘钥

    Visual Studio 2019 EnterpriseBF8Y8-GN2QH-T84XB-QVY3B-RC4DF Visual Studio 2019 ProfessionalNYWVH-HT4X ...

  7. JAVA数据结构--LinkedList双向链表

    链表是一种物理存储单元上非连续.非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的.链表由一系列结点(链表中每一个元素称为结点)组成,结点可以在运行时动态生成.每个结点包括两个部分: ...

  8. 【算法笔记】B1008 数组元素循环右移问题

    1008 数组元素循环右移问题 (20 分) 一个数组A中存有N(>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(≥0)个位置,即将A中的数据由(A​0​​A​1​​⋯A​N ...

  9. 【贪心】洛谷P1607 [USACO09FEB]庙会班车Fair Shuttle 题解

        不是很容易写出正解的贪心问题. 题目描述 Although Farmer John has no problems walking around the fair to collect pri ...

  10. 【研究】XML外部实体注入(XXE)

    在正式发布的2017 OWAST Top10榜单中,出现了三种新威胁: A4:XML外部实体注入漏洞(XXE) A8:不安全的反序列化漏洞 A10:不足的记录和监控漏洞 验证XXE: 构造请求 < ...