<!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. 使用webpack开发ES6程序的正确姿势

    1.cnpm install babel-loader babel-core babel-preset-es2015 -D 2.cnpm install babel-plugin-transform- ...

  3. WPF：CheckBox竖向的滑块效果

    原文:WPF:CheckBox竖向的滑块效果 之前做了一个横向的滑块效果,<WPF:CheckBox滑块效果>,其实我觉得那个不好看,今天又做了一个竖向的玩. <Style Targ ...

  4. 关于zabbix _get返回Could not attach to pid的问题

    分析:这是因为由于zabbix客户端没有权限,导致zabbix_server端无法获取到键值数据!! 解决:在客户端上添加用户sudo的权限就可以解决了. 验证:是脚本的话还要在脚本里加上sudo的命 ...

  5. 如何把win10系统迁移到SSD固态硬盘

    https://jingyan.baidu.com/article/5d368d1ec59ac43f60c05733.html 我之前将两个盘都已经固定在笔记本内,迁移完之后无论怎么改还是从原来的机械 ...

  6. C++ Timer

    Timer机制 这里所说的Timer机制是定时器(Timer),例如在Javascript中就提供定时执行代码的功能.但是在C++标准中暂时没有实现这一功能的函数. Javascript中的Timer ...

  7. tornado 04 模板

    一.模板 #模板就是一个HTML文件,只是其中添加了模板语法,需要服务器的渲染才能正常显示数据 #通过render可以返回一个html网页,不过那都是固定的页面,固定的数据,如果数据是不确定的,是会不 ...

  8. 编写高质量代码:Web前端开发修炼之道（一）

    最近老大给我们买来一些技术方面的书籍,其实很少搬着一本书好好的完整的看完过,每每看电子档的,也是打游击式的看看这章,瞅瞅那章,在那5本书中挑了一本比较单薄的<编写高质量代码web前端开发修炼之道 ...

  9. C++_IO与文件1-输入与输出概述

    为了方便起步先从istream类对象cin和ostream类对象cout开始,了解输入和输出的基本方法: 同时使用ifstream和ofstream对象进行文件的输入和输出: 然后详细学习cin和co ...

  10. HDU - 4035 循环型概率DP

    题解待会在上 #include<iostream> #include<algorithm> #include<cstdio> #include<cstring ...