<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>liangduanqi</title>

    <style>

        .gray{

            background: #ccc;

        }

    </style>

    <script src="vue.js"></script>

    <script src="https://cdn.bootcss.com/vue-resource/0.7.0/vue-resource.js"></script>

</head>

<body>

    <div id="box">

        <input type="text" v-model='t1' @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">

        {{t1}}

        <ul>

            <li v-for="v in myData" :class="{gray:$index==now}">{{v}}</li>

        </ul>

        <p v-show="myData.length==0">暂无数据。。。</p>

    </div>

</body>

    <script>

            new Vue({

                el:'#box',

                data:{

                    myData:[],

                    t1:'',

                    now:-1

                },

                methods:{

                    get:function (ev) {

                                                if(ev.keyCode==38 || ev.keyCode==40)return;

                                                if(ev.keyCode==13){

                            window.open('https://www.baidu.com/s?wd='+this.t1);

                            this.t1='';

                        }

                         this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{

                            wd:this.t1

                        },{

                            jsonp:'cb'

                        }).then(function (res) {

                            this.myData=res.data.s;

                        },function () {

                        });

                    },

                    changeDown:function () {

                        this.now++;

                        console.log(this.now,'Down');

                        if(this.now==this.myData.length)this.now=-1

                        this.t1=this.myData[this.now];

                    },

                    changeUp:function () {

                        this.now--;

                        if(this.now==-2)this.now=this.myData.length-1

                        this.t1=this.myData[this.now];

                    }

                }

            })

    </script>

</html>

利用api模拟百度搜索功能的更多相关文章

  1. JavaScript-dom3 json_str dom元素控制 模拟百度搜索

    访问关系-封装代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. python--selenium简单模拟百度搜索点击器

    python--selenium简单模拟百度搜索点击器 发布时间:2018-02-28 来源:网络 上传者:用户 关键字: selenium 模拟 简单 点击 搜索 百度 发表文章摘要:用途:简单模拟 ...

  3. Splinter学习－－初探1，模拟百度搜索

    Splinter是以Selenium, PhantomJS 和 zope.testbrowser为基础构建的web自动化测试工具,基本原理同selenium 支持的浏览器包括:Chrome, Fire ...

  4. vue 使用watch监听实现类似百度搜索功能

    watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...

  5. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  6. JS 实现百度搜索功能

    今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  7. 原生JS实现百度搜索功能

    今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...

  8. C#下利用正则表达式实现字符串搜索功能的方法（转）

    关键字:正则表达式.元字符.字符串.匹配: 1.正则表达式简介:正则表达式提供了功能强大.灵活而又高效的方法来处:.NET框架正则表达式并入了其他正则表达式实现的: 2.字符串搜索:正则表达式语言由两 ...

  9. JS---DOM---案例：模拟百度搜索框

    模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...

随机推荐

  1. FFmpeg的一般流程

    FFMPeg一般流程: 1.av_register_all();//注册所有文件格式和编解码库 2.avformat_network_init();//打开网络视频流 3.av_open_input_ ...

  2. 制作linux下的.run安装包

    前言 之前往linux上安装一个软件,都是以压缩包或者压缩包+shell的方法,这每次安装,都是先scp到某个目录, 解压,安装......稍微厉害的,会写个shell脚本.但是还是达不到真正的快速方 ...

  3. HTML5 CSS3 Transform 笔记 (scale不起作用)

    Transform的 scale属性不能作用于 inline元素上,例如span 并且动画 animation  也不能作用于inline元素上 可以给span加display:inline-bloc ...

  4. 开启Java之旅

    学习应用系统的服务器开发,也许并不算什么“旅行”,也不会那么‘愉快’.但是,我希望这次能够同以往有所不同,更加努力地学习J2EE. 从2月份开始,从事web前端开发,并在公司的的项目中,独立完成了4个 ...

  5. Just oj 2018 C语言程序设计竞赛（高级组）H: CBT?

    H: CBT? 时间限制: 1 s      内存限制: 128 MB      提交 我的状态 题目描述 对于二叉树,如果这棵树的节点排布是按行从上到下,每行从左到右挨个放置,中间不会有空闲的节点. ...

  6. HDFS的一些配置文件修改

    sbin/start-dfs.sh 和 sbin/stop-dfs.sh 在第二行增加如下内容 HDFS_DATANODE_USER=root HDFS_DATANODE_SECURE_USER=hd ...

  7. C# 之设计原则

    代码也需要有秩序,就像世界需要秩序,基于SOLID architecture principles. 一.SOLID原则 S.O.L.I.D.是一组面对面向对象设计的最佳实践的设计原则.术语来自Rob ...

  8. 【转】Windows Server 2008 R2下安装 .net framework3.5

    原文地址:http://hi.baidu.com/tonny_dxf/item/6831bcdc3d7c06e7b2f7777c      [你必须用角色管理工具安装.net framework3.5 ...

  9. youDao

    2018-09-22Journeys end in lovers' meeting.漂泊止于爱人的相遇. All extremes of feeling are allied with madness ...

  10. datetime库运用

    1. date(),time(),datetime() 时间数据概用: 2. datetime.datetime.now() 获取当前时间 datetime.datetime.utcnow() 获取格 ...