<!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. SpringBoot设置默认启动页的2种方式

    方式一: 继承WebMvcConfigurerAdapter,重写addViewControllers. @Configurationpublic class WebConfigurer extend ...

  2. Spark调优秘诀——超详细

    版权声明:本文为博主原创文章,转载请注明出处. Spark调优秘诀 1.诊断内存的消耗 在Spark应用程序中,内存都消耗在哪了? 1.每个Java对象都有一个包含该对象元数据的对象头,其大小是16个 ...

  3. Flask Web开发实战（入门、进阶与原理解析）

    URL重定向 错误响应 > 如果你想手动返回错误响应,可以使用Flask提供的abort()函数. XML 上下文全局变量 [](https://img2018.cnblogs.com/blog ...

  4. [原创]在Centos7上搭建私有的Gitlab服务器

    前言 Git作为后起之秀,在版本控制领域占据了头把交椅.Github作为托管式的代码仓库,从代码安全性和网络传输等各个方面考虑,对于个人和公司来讲,具有一定的局限性.Gitlab提供的不同版本的安装包 ...

  5. [BZOJ 3262]陌上开花

    今天写了到偏序问题,发现博主真的是个傻X 传送门 以前的写法 /************************************************************** Probl ...

  6. MNIST数据集分类简单版本

      import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data #载入数据集 mnist = ...

  7. HDU 6356 （线段树-l,r 之间小于val 的变val+单点求值)

    题目描述: 给你一个长度为n的最开始为0的数以及m个更新操作以及数据生成器参数X,Y,Z.每次操作,将由数据生成器生成出li,ri,vi.让你从区间[li,ri]中,将所有小于vi的数变为vi.最后让 ...

  8. HDU - 2147 博弈 P/N分析

    结论题,很显然和奇偶有关 PS.尝试用dfs写出PN表写崩了 #include<iostream> #include<algorithm> #include<cstdio ...

  9. [原创]Aop之使用Autofac+Castle 自动注入服务且动态代理服务实现拦截(非MVC控制器拦截)

    public static class AutofacComponentManualRegister { /// <summary> /// 注册 /// </summary> ...

  10. log4j详解与实战

    [转自] http://www.iteye.com/topic/378077 log4j是一个非常强大的log记录软件,下面我们就来看看在项目中如何使log4j. 首先当然是得到log4j的jar档, ...