<!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. ssh 远程登录TX2

    TX2 端SSH操作 安装: sudo apt-get install openssh-server 确认sshserver是否启动: ps -e |grep ssh 如果看到sshd那说明ssh-s ...

  2. ubuntu 16.04 安装googlepinyin中文输入法

    安装谷歌拼音输入法 打开终端输入: apt-get install fcitx-googlepinyin 安装完成之后,进入系统设置 安装语言包 修改输入法系统 点击“System Setting”- ...

  3. elasticsearch head 连接不到elasticsearch

    配置好head后看到没有正常连接到elasticsearch.  重启后效果:

  4. Qt 学习之路 2（27）：渐变

    Qt 学习之路 2(27):渐变 豆子 2012年11月20日 Qt 学习之路 2 17条评论 渐变是绘图中很常见的一种功能,简单来说就是可以把几种颜色混合在一起,让它们能够自然地过渡,而不是一下子变 ...

  5. 【算法笔记】B1005 继续(3n+1)猜想+sort()用法

    1005 继续(3n+1)猜想 (25 分) 卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程 ...

  6. Cannot reinitialise DataTable 问题

    加个 destroy:true,   //Cannot reinitialise DataTable,解决重新加载表格内容问题

  7. python中各进制之间的转换

    偶然翻看进制转换的内容.这里简单做一个记录吧. #十进制转换二进制 >>> bin() '0b1010' #十进制转换十六进制 >>> hex() '0xa' #二 ...

  8. AES/ECB/NoPadding 加减密

    package unit; import javax.crypto.Cipher; import javax.crypto.spec.SecretKeySpec; import org.apache. ...

  9. webpacke

    webpacke   安装 首先要安装 Node.js, Node.js 自带了软件包管理器 npm 用npm 安装webpack $ npm install webpack -g 此时 Webpac ...

  10. DbUtils(二) 结果集实例

    单行数据处理:ScalarHandler    ArrayHandler    MapHandler    BeanHandler 多行数据处理:BeanListHandler    Abstract ...