<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0
        }

        .sousuo {
            width: 300px;
            height: 40px;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        li {
            list-style: none;
            line-height: 30px;
            padding: 0 10px;
        }

        li:hover {
            background-color: #777;
            color: #fff;
        }

        ul {
            position: absolute;
            display: none;
        }
    </style>
</head>
<body>
<input type="text" class="sousuo"/>
<ul class="ul"></ul>
<script src="../blog/javascripts/jquery-1.7.2.min.js"></script>
<script>

    function position() {
        var sousuo = $(".sousuo");
        $(".ul").css({
            top: sousuo.offset().top + sousuo.height() + 5,
            left: sousuo.offset().left,
            width: sousuo.css("width")
        })
    }
    function demo(data) {
        var ul = $('.ul');
        var html = '';
        if (data.s.length) {
            ul.css("display",'block');
            for (var i = 0; i<data.s.length; i++) {
                html +='<li>'+data.s[i]+'</li>';
            }
            ul.html(html);
        }
    }
    $(".ul").delegate("li",'click',function () {
      location.href = 'https://www.baidu.com/s?wd='+$(this).text();
    });
    $(document).ready(function () {
        position();
        $('.sousuo').on('keyup', function () {
            if (this.value) {
                var script = document.createElement("script");
                script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=demo';
                document.body.appendChild(script);
            }
        });
    });
    window.onresize = function () {
        position();
    }
</script>
</body>
</html>

百度跨域搜索demo的更多相关文章

  1. H5新增的postMessage跨域解决方案Demo

    Demo背景:html中使用iframe嵌入了跨域的vue项目,在html中将参数传入到跨越的vue项目中. 向跨越的子窗口中发送数据 function sendMessage(data) { // ...

  2. Api之Cors跨域以及其他跨域方式

    Web Api之Cors跨域以及其他跨域方式(三)   我们知道ajax不能跨域访问,但是有时我们确实需要跨域访问获取数据,所以JSONP就此诞生了,其本质使用的是Script标签,除JSONP以外还 ...

  3. Web Api之Cors跨域以及其他跨域方式（三）

    我们知道ajax不能跨域访问,但是有时我们确实需要跨域访问获取数据,所以JSONP就此诞生了,其本质使用的是Script标签,除JSONP以外还有另外实现跨域方式 一.手动实现JSONP跨域 1.首先 ...

  4. Angular通过CORS实现跨域方案

    以前有一篇很老的文章网上转了很多,包括现在如果你百度"跨域"这个关键字,前几个推荐的都是"Javascript跨域总结与解决方案".看了一下感觉手段有点陈旧了, ...

  5. 简单JSONP跨域请求

    JSONP原理:利用<script>标签的src属性实现跨域的请求.可在URL中提供回调函数的名字.后台进过处理后将数据以回调函数参数的形式返回. demo:JSONP请求不同端口的数据 ...

  6. jsonp跨域实现

    原理:借助script可以跨域的思想,将跨域请求放在script中,当页面解析到改script标签时,就会向该src指向的地址发出一个请求,达到跨域请求的目的. 两点:(1)主要是利用了 <sc ...

  7. Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装

    使用vue init webpack 你的项目名称初始化一个vue的项目 安装依赖 npm install vue-resource http-proxy-middleware vuex koa 在项 ...

  8. node端代理浏览器路由 解决浏览器跨域问题

    var _ = require('lodash'); var request = require("request"); /* @LM 2017-02-16 node端代理浏览器路 ...

  9. JSONP实现Ajax跨域请求

    前言 由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...

随机推荐

  1. Q：简单实现URL只能页面跳转，禁止直接访问

    sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据,且不同标签页的session不能共享,通过此特性来控制某个页面只能通过上级页面同标签页跳转 ...

  2. R语言 判断

    R语言判断 决策结构要求程序员指定要由程序评估或测试的一个或多个条件,以及如果条件被确定为真则要执行的一个或多个语句,如果条件为假则执行其他语句. 以下是在大多数编程语言中的典型决策结构的一般形式 R ...

  3. <Java编程思想>读书笔记(1)-对象导论、一切都是对象

    1.面向对象编程:OOP (Object-oriented Programming) 2.Alan Kay 总结的面向对象语言5个基本特性: 1) 万物皆为对象 2) 程序是对象的集合,他们通过发送消 ...

  4. 夏令营501-511NOIP训练18——高二学堂

    传送门:QAQQAQ 题意:给你一个数$n$,把它拆分成至多$k$个正整数,使得这些数的和等于$n$且每一个正整数的个数不能超过$4$ 拆分的顺序是无序的,但取出每一个数方案是不同的(例如我要拆$1$ ...

  5. 54Mbps、150Mbps、433Mbps 你知道这三个Wi-Fi速率怎么算的吗？

           802.11g能够提供54Mbps的最大速率, 802.11n和802.11ac单流分别能够提供150Mbps和433Mbps的最大速率,这些数字是怎么算的呢?(看红字,更容易理解哟) ...

  6. 深夜Python - 第1夜 - for 迷 in 迷思

    深夜Python - 第1夜 - for 迷 in 迷思 在一个月黑风高的夜晚,我悄悄打开编辑器,进入程序的世界.刚刚学会Python的我,由于一段时间的过度装B,被委托优化一段程序,我信心十足地接下 ...

  7. 28-Ubuntu-远程管理命令-02-查看网卡的配置信息

    命令 功能 ifconfig 查看网卡配置信息 ifconfig | grep inet 查看网卡对应的IP地址 ping  127.0.0.1 检测本地网卡是否正常 ping  IP地址 检测到目标 ...

  8. API文档管理工具

    系统庞大之后,前后端分离开发,前端调用后端提供的接口,请求协议一般是 HTTP,数据格式一般是 JSON.后台只负责数据的提供和计算,而完全不处理展现逻辑和样式:前端则负责拿到数据,组织数据并展现的工 ...

  9. 【转】详解tomcat的连接数与线程池

    对tomcat线程池.Connector的BIO.NIO解析的很透彻的一篇文章. 原文链接:https://www.cnblogs.com/kismetv/p/7806063.html 前言 在使用t ...

  10. spring在普通类中获取session和request

    在使用spring时,经常需要在普通类中获取session,request等对像.比如一些AOP拦截器类,在有使用struts2时,因为struts2有一个接口使用org.apache.struts2 ...