<!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. AJAX发送json，SpringMVC 接收JSON，@RequestBody

    需求:JQuery ajax前台,采用 POST请求 发送json,后台使用SpringMVC接收json并处理 前台: $.ajax({ url:"请求地址", type:&qu ...

  2. 2019你还不学Python？

    废话不多说,先上张图,展示一下 Python 不可置信的增长情况. 根据Stack Overflow 的调查显示,在全球范围内,Python 开发人员可以拿到 56,000 美元的年薪.而 Indee ...

  3. elementtaryos root密码更改

    在elementtaryos 终端中使用root 账户但不幸忘记密码怎么办?请进行如下操作...... 1.进入高级选项选中recovery mode 2.按e编辑,找到recovery nomode ...

  4. excel文件的groovy脚本在SoapUI中进行数据驱动测试

    SoapUI Pro具有从外部文件读取数据的功能,例如:excel,csv等.但SoapUI不提供从excel文件读取数据的功能.因此,为了从SoapUI中的excel文件中读取数据,我们需要在gro ...

  5. 开发环境，eclipse编辑器java代码自动提示

    Eclipse+ADT+Android SDK 搭建安卓开发环境 eclipse编辑器java代码自动提示 window-->Preferences-->JAva-->Content ...

  6. CentOS 7 系统区域和键盘设置

    系统区域设置包括语言.键盘布局等,可以通过修改/etc/locale.conf配置文件或使用localectl实用程序来进行设置,一般在安装时设置为默认选择(英文.美式键盘)即可 修改配置文件 [ro ...

  7. python学习，day1：循环判断基本语句的几个代码

    # coding=utf-8 # Author: RyAn Bi count = 0 '''while True : print('count:',count) count = count + 1 i ...

  8. 用 Koa 提供 Restful service 和查询 MongoDB 的例子

    const path = require('path'); const Koa = require('koa'); const app = new Koa(); const compose = req ...

  9. 处女座和他的小姐姐（三）----数位DP

    链接:https://ac.nowcoder.com/acm/contest/329/G来源:牛客网 经过了选号和漫长的等待,处女座终于拿到了给小姐姐定制的手环,小姐姐看到以后直呼666! 处女座其实 ...

  10. 剑指offer——面试题15：二进制中 1的个数

    // 面试题15:二进制中1的个数 // 题目:请实现一个函数,输入一个整数,输出该数二进制表示中1的个数.例如 // 把9表示成二进制是1001,有2位是1.因此如果输入9,该函数输出2. #inc ...