vue版本是1.0.21

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>下拉搜索框</title>

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

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

         <style>

             .gray{

                 background-color: #ccc;

             }

         </style>

         <script type="text/javascript">

             window.onload = function(){

                 new Vue({

                     el:"body",

                     data:{

                         myData:[],

                         t:"",

                         now:-1,

                     },

                     methods:{

                         get:function(e){

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

                             if(e.keyCode == 13){

                                 window.open('https://www.baidu.com/s?wd='+this.t);

                                 this.t='';

                             }

                             this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{

                                 wd:this.t

                             },{

                                 jsonp:"cb"

                             }).then(function(res){

                                 this.myData = res.data.s;

                             },function(res){

                                 alert(res.status);

                             })

                         },

                         changeDown:function(){

                             this.now++;

                             if(this.now == this.myData.length) this.now=-1;

                             this.t = this.myData[this.now];

                         },

                         changeUp:function(){

                             this.now--;

                             if(this.now==-2) this.now=this.myData.length-1;

                                 this.t = this.myData[this.now];

                         }

                     }

                 })

             }

         </script>

     </head>

     <body>

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

         <ul>

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

         </ul>

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

     </body>

 </html>

vue下拉搜索的更多相关文章

  1. yii2 GridView 下拉搜索实现案例教程

    作者:白狼 出处:http://www.manks.top/article/yii2_gridview_dropdown_search本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章 ...

  2. GridView 下拉搜索

    /** * 下拉筛选 * @column string 字段 * @value mix 字段对应的值,不指定则返回字段数组 * @return mix 返回某个值或者数组 */ public stat ...

  3. angularjs select下拉搜索框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. laravel7 下拉搜索

    html:页面 首先给下拉框一个页面改变事件,将下拉框的值发送至后台,进行查询 <select name="interest" id="serarch" ...

  5. select2 下拉搜索 可编辑可搜索 / 只可搜索

    官网 (http://select2.github.io/examples.html) <!--引入select2需要的文件--> <script type="text/j ...

  6. vue 下拉刷新数据的插件的使用：

    1.安装: npm i vue-scroller -S npm install vue-scroller -D 2.在需要加载的页面中引入,或在公共js文件中引入: import VueScrolle ...

  7. Vue 下拉框值变动事件传多个参数

    在使用 Vue 进行开发时,下拉框值变动事件 @change 是很常用的. 其传参一般分为两种方式:默认传参和自定义传参. 默认传参 @change 默认会传选中项标识的参数,在传参处不用定义,在方法 ...

  8. vue 下拉刷新 上拉加载（vue-scroller）

    <template> <div class="wdRecordCon"> <x-header :left-options="{backTex ...

  9. Vue下拉刷新组件

    Examples examples Installation npm install vue-pull-to --save Use Setup <template> <div> ...

随机推荐

  1. 试题 E: 迷宫 第十届蓝桥杯

    [问题描述]下图给出了一个迷宫的平面图,其中标记为 1 的为障碍,标记为 0 的为可以通行的地方.010000000100001001110000迷宫的入口为左上角,出口为右下角,在迷宫中,只能从一个 ...

  2. Homework 4

    Homework 4 开发工具:dev c++ 开发语言:c++ 源代码上传至github:上传一直失败... 合作人:曹权 博客地址:http://www.cnblogs.com/c2016/ 这里 ...

  3. 原创：MVC 5 实例教程(MvcMovieStore 新概念版:mvc5.0,EF6.01) - 3、创建项目

    说明:MvcMovieStore项目已经发布上线,想了解最新版本功能请登录 MVC 影视(MvcMovie.cn) 进行查阅.如需转载,请注明出处:http://www.cnblogs.com/Dod ...

  4. Win 8下Rime输入法无法同步的临时解决方法

    意外发现了Rime输入法(OS X上叫鼠须管'Squirrel',windows上叫小狼毫'Weasel',linux上叫中州韵'ibus-rime',连名字都起的这么牛逼),真是神器啊,流畅的速度, ...

  5. C# skip 重试执行代码段

    var retryTimes = 5; //重试次数 int times = 0;  skip:              //代码段开始 //处理逻辑 var result=false ;   // ...

  6. ASP.net 居中

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...

  7. Java io流完成复制粘贴功能

    JAVA 中io字节输入输出流 完成复制粘贴功能: public static void main(String[] args) throws Exception{        // 创建输入流要读 ...

  8. kvm快照备份及常用命令

    转载自:http://www.myjishu.com/?p=431 好文章 kvm快照备份及常用命令 kvm快照,分两种: 1种lvm快照,如果分区是lvm,可以利用lvm进行kvm的快照备份 2种由 ...

  9. mysql 查看索引

    查看索引 mysql> show index from tblname; mysql> show keys from tblname; · Table 表的名称. · Non_unique ...

  10. [Objective-C语言教程]指针（15）

    Objective-C中的指针简单易学.使用指针可以更轻松地执行某些Objective-C编程任务,并且在不使用指针的情况下无法执行其他任务(如动态内存分配). 所以有必要学习指向成为一个完美的Obj ...