<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

        .gray{

            background: #ccc;

        }

    </style>

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

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

    <script>

        window.onload=function(){

            new Vue({

                el:'body',

                data:{

                    myData:[],

                    t1:'',

                    now:-1

                },

                methods:{

                    get:function(ev){

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

                        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++;

                        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>

</head>

<body>

    <div id="box">

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

        <ul>

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

                {{value}}

            </li>

        </ul>

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

    </div>

</body>

</html>

知识点：

1.使用v-show:数据长度为0的时候显示‘暂无数据’
2.使用jsonp获取数据

3.键盘事件keydown.down   keydown.up按键向上向下的按键

Vue之仿百度搜索框的更多相关文章

  1. Springboot+Vue实现仿百度搜索自动提示框匹配查询功能

    案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...

  2. vue-resource使用 (vue仿百度搜索)

    1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> ...

  3. 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框

    使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  4. 利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）

    实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...

  5. Ajax以及类似百度搜索框的demo

    public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...

  6. JavaScript实现模糊推荐的input框(类似百度搜索框)

    如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

  7. React实现最完整的百度搜索框

    import React,{Component} from 'react' import ReactDOM,{render} from 'react-dom' import 'bootstrap/di ...

  8. Ajax跨域：Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  9. window系统谷歌浏览器百度搜索框光标不能输入并且不显示光标----自制bug以及解决

    --------------------bug无处不在------------------------- 今天在搞代码的时候,保存文件无意中犯了个致命错误,文件名称写入非法字符,可能与Windows系 ...

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

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

随机推荐

  1. 动态SQL与静态SQL使用场景

    静态SQL 和动态SQL 的区别 静态SQL(或嵌入式SQL) 是应用程序中的 SQL 语句,它们在运行时不会更改,因此可以硬编码到应用程序中. 动态 SQL是在运行时构造的 SQL 语句:例如,应用 ...

  2. 2020 OC项目集成flutter

    看了网上基本上都是相同套路,但是到我这就不行了,终于解决了, 主要就是profile文件编写, 1.在oc项目的同级目录项创建flutter模块 就是在oc项目的父级目录下,执行 flutter cr ...

  3. 聊聊Spring注解@Transactional失效的那些事

    一.前言 emm,又又又踩坑啦.这次的需求主要是对逾期计算的需求任务进行优化,现有的计算任务运行时间太长了.简单描述下此次的问题:在项目中进行多个数据库执行操作时,我们期望的是将其整个封装成一个事务, ...

  4. PTA 21级数据结构与算法实验6—图论

    目录 7-1 邻接矩阵表示法创建无向图 7-2 邻接表创建无向图 7-3 图深度优先遍历 7-4 单源最短路径 7-5 列出连通集 7-6 哈利·波特的考试 7-7 家庭房产 7-8 森森美图 7-9 ...

  5. Java计算日期之间相差时间和解决浮点类型精度过长

    计算日期之间相差 此处相差计算以分钟为单位,自行可根据业务场景更改 /** * 测试时间相差分钟 */ @Test public void getTime() { SimpleDateFormat s ...

  6. Truncate 和 Delete 的区别与选择

    1)事务和日志 delete   语句执行删除的过程是每次从表中删除一行,并且同时将该行的删除操作作为事务记录在日志中保存以便进行回滚操作. truncate table  则 一次性地从表中删除所有 ...

  7. vulnhub_me and my grilfriend

    解题步骤 主机nmap扫描,开放22和80端口 访问该ip,发现只能本地访问 查看源代码,提示需要使用x-forwarded-for的请求头,可以在burp suite中每次添加一个请求头,也可以使用 ...

  8. C# 处理 csv 文件中的双引号

    C# CSV 双引号处理 直接上代码,自己写的,有问题可以随时联系 // 没有保证所有的都能对上,目前只处理了自己所遇见的格式 public static string[] SplitStr(stri ...

  9. 日历插件zaneDate 不依赖任何第三方插件 简单高效

    先来找图看看时间选择器的效果:             没错就是这个吊样,如果你不需要这个色调,你可以fork我的github项目任意修改美美的色调. 当然也欢迎你给我提很多很多的bug让我改不停 . ...

  10. C++ 核心指南之 C++ 哲学/基本理念（下）

    C++ 核心指南(C++ Core Guidelines)是由 Bjarne Stroustrup.Herb Sutter 等顶尖 C+ 专家创建的一份 C++ 指南.规则及最佳实践.旨在帮助大家正确 ...