<!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. 如何查看响应端口号被个程序占用(Windows)

        我们以80端口为例,在dos输入命令“ netstat  -aon|findstr  "80" 后按回车显示如下,可以看到占用80端口对应的程序的PID号为1752     ...

  2. servlet获取多个同名参数

    String[] item = request.getParameterValues("参数名");

  3. NodeJs——router报错原因

    rout.js var http = require('http'); var url = require('url'); var router = require('./models/router. ...

  4. INFO JobScheduler: Added jobs for time 1524468752000 ms/INFO MemoryStore: Block input-0-1524469143000 stored as bytes in memory/完全分布式 ./bin/run-example streaming.NetworkWordCount localhost 9999无法正常运行

    1.完全分布式  ./bin/run-example streaming.NetworkWordCount localhost 9999无法正常运行: 1 [hadoop@slaver1 spark- ...

  5. Java中堆内存和栈内存的区别

    Java把内存分成两种,一种叫做栈内存,一种叫做堆内存. 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当在一段代码块中定义一个变量时,java就在栈中为这个变量分配内存空 ...

  6. javascript var变量删除

    var有三种声明的情形: var声明的全局变量 var在函数范围内声明的局部变量 eval中声明的全局变量. 首先, 1.2种情形var声明的变量是无法删除的. 尽管var声明的全局变量是属于wind ...

  7. codeforces 1037

    题解: E-trips 哎哎哎好傻逼啊 没有想到算不能的一直在想怎么算能的 太傻逼了 其实很简单 我们只需要对好友<=k的首先dfs一下给他连接着的朋友-1 然后如果小于了就递归下去 这个正确性 ...

  8. 3.ELK 之elasticsearch CRUD

    名词介绍 index: type: document: 数据类型: 索引(index)创建示例 .   type的创建(7.x之后)将会去掉该内容,点我看为什么? 参考脚本: mapping使用 其他 ...

  9. [转]编程珠玑第五章二分搜索(折半查找)之java实现

    http://blog.csdn.net/hwe_xc/article/details/51813080 二分搜索又称为折半查找,用来高效快速的解决如下问题: 我们需要确定排序后的数组x[0..n-1 ...

  10. NEST - 编写布尔查询

    Writing bool queries Version:5.x 英文原文地址:Writing bool queries 在使用查询 DSL 时,编写 bool 查询会很容易把代码变得冗长.举个栗子, ...