<!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. c++实现 给定直角停车位两个点，求取剩余两点坐标。

    //2018-09-08-fourmi /*************************include head files************************************ ...

  2. tomcat安装出现的闪退问题

    如果闪退 在该文件中结尾添加pause  可以检测到路径问题是不是有问题

  3. lsattr chattr 文件安全设置

    [root@test_android_client_download xianlaigames]# lsattr -------------e- ./jilinmj.apk[root@test_and ...

  4. C#矩阵求逆

    来源:http://zhidao.baidu.com/link?url=DiqAbq9YUYn3z7QjxGGoF0PLZwN-Y9ecqKB7Gy38JWRD1riMIYukVKXKq88pxtWL ...

  5. C#学习-静态

    有提过类的成员,有字段.属性.方法和构造函数等,也可以使用static关键字将其声明为类的静态成员. 静态成员属于类级别的概念,它不属于类的实例. 可以使用static关键字来声明静态字段,静态字段与 ...

  6. ynoi2018

    题解: 全分块是啥操作啊.. 而且都好难.. 1.未来日记 这个比较简单 对每个块开个线段树维护权值 $n\sqrt{n}logn$ 这个会炸空间 并不能做... 但还是说一下做法 首先考虑分块 然后 ...

  7. Discuz3.2 新用户插入数据库SQL

    我们的网站要和Discuz整合到一起,有个新用户同步的需求,网络上很多的做法是用 UCenter的接口来做,反正最后都是插入SQL,笔者使用了直接操作数据库的方式,把操作的表和SQL整理了下,后面如果 ...

  8. Codeforces 1017F The Neutral Zone (看题解)

    这题一看就筛质数就好啦, 可是这怎么筛啊, 一看题解, 怎么会有这么骚的操作. #include<bits/stdc++.h> #define LL long long #define f ...

  9. git 错误解决

    1.今天 当我  执行  git add  somefile 的时候,出现 如下 错误: If no other git process is currently running, this prob ...

  10. 给定一个非负索引 k，其中 k ≤ 33，返回杨辉三角的第 k 行。

    从第0行开始,输出第k行,传的参数为第几行,所以在方法中先将所传参数加1,然后将最后一行加入集合中返回. 代码如下: public static List<Integer> generat ...