<!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. go的gin框架从请求中获取参数的方法

    前言: go语言的gin框架go里面比较好的一个web框架, github的start数超过了18000.可见此框架的可信度 如何获取请求中的参数 假如有这么一个请求: POST   /post/te ...

  2. 用C语言实现窗口抖动

    #include "stdafx.h" #include <stdio.h> #include<Windows.h> int main() { ; //休眠 ...

  3. UIActionSheet的常用方法

    enum UIActionSheetStyle : Int { case Automatic // take appearance from toolbar style otherwise uses ...

  4. ifconf家族命令

    1  ifconfig 命令: ifconfig 命令用来查看和配置网络设备.当网络环境发生改变时可通过此命令对网络进行相应的配置. 查看: ifconfig : 显示正在激活中的网卡 ifconfi ...

  5. 微信小程序—文件系统

    文件系统 文件系统是小程序提供的一套以小程序和用户维度隔离的存储以及一套响应的管理接口.通过wx.getFilesSystemManager()可以获取到全局唯一的文件管理器,所有文件管理操作通过Fi ...

  6. 51Nod1675 序列变换 数论 莫比乌斯反演

    原文http://www.cnblogs.com/zhouzhendong/p/8665675.html 题目传送门 - 51Nod1675 题意 给定序列$a,b$,让你求满足$\gcd(x,y)= ...

  7. HDU4466 Triangle 计数 容斥原理

    原文链接https://www.cnblogs.com/zhouzhendong/p/HDU4466.html 题目传送门 - HDU4466 题意 多组数据,每次询问一个数 $n(n\leq 5\t ...

  8. mysql解决数据库死锁问题

    为了保证数据的正确性,对数据库进行操作的时候都会进行上锁,也就是进行修改数据的时候同一时间只能有一个进程,当这个进程处理完了,释放锁了,其他进程才可以进行操作! 总是会碰见一些意外情况,导致数据库死锁 ...

  9. OpenCV-Python 中文教程（搬运）目录

    OpenCV-Python 中文教程 OpenCV官方教程中文版(For Python) OpenCV2-Python-Tutorials 段力辉 译 说明:搬运自linux公社pdf文件,粗略搬运, ...

  10. springboot拦截器中获取配置文件值

    package com.zhx.web.interceptor; import com.zhx.util.other.IpUtil; import org.slf4j.Logger; import o ...