<!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. LoadRunner JAVA Vuser接口测试

    注:JDK只支持1.6 1.创建工程Test2.写个经典的HelloWorld类.3.Runas--->Java Application运行下4.将工程下的整个com包拷贝到loadrunner ...

  2. BZoj 2301 Problem b（容斥定理+莫比乌斯反演）

    2301: [HAOI2011]Problem b Time Limit: 50 Sec  Memory Limit: 256 MB Submit: 7732  Solved: 3750 [Submi ...

  3. mysql集群7.4.1

    一:mysql集群原理: 1 mysql集群分为三个节点: 1.1 控制节点:本身不提供服务只是控制整个集群的开启与关闭 1.2 数据节点:真正提供数据库的存储,并和其他数据节点关联用 1.3 sql ...

  4. Tensorflow:DCGAN生成手写数字

    参考地址:https://blog.csdn.net/miracle_ma/article/details/78305991 使用DCGAN(deep convolutional GAN):深度卷积G ...

  5. Apache Kafka 概述

    kafka教程,完全参照w3school: https://www.w3cschool.cn/apache_kafka/apache_kafka-dac11yot.html 以下是入门学习过程中摘录的 ...

  6. Memcached 快速入门

    Memcached简介 Memcached是一个专门用来做缓存的服务器,而且缓存的数据都在内存中.Memcached就相当于一个Dictionary键值对集合,保存的是键值对,然后根据key取valu ...

  7. Task.Run()任务执行

    1)Task本身就是异步执行的(4.5的那个类). 2)控制数量和终止线程问题可以考虑这个模式: static async void RunAsync() { CancellationTokenSou ...

  8. awk常见用法

    awk作为linux字符搜索,结果统计的实用工具,其在linux日常运维中有着很多的巧妙运用.下面就来技术一下刚刚学到的技巧 #awk命令统计文件夹下所有文件大小 ls -l |awk 'BEGIN ...

  9. hibnet 自动生成表格

    在pom文件中添加相关的依赖 在application.yml文件中添加配置信息 新建实体类Boy 项目运行,mysql就产生了一个boy表. 需要注意的是:当配置文件ddl-auto: create ...

  10. Cookies 和 Session的区别

    1.cookie 是一种发送到客户浏览器的文本串句柄,并保存在客户机硬盘上,可以用来在某个WEB站点会话间持久的保持数据. 2.session其实指的就是访问者从到达某个特定主页到离开为止的那段时间. ...