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. 深海划水队项目----七天冲刺之day3

    上完选修后的站立式会议: 工作进度 昨天已完成的工作: 推进开发进度,进一步理清开发思路. 今天计划完成的工作: 生成游戏块的类,其中包括7种不同的游戏块,每个游戏块又可以通过旋转得到另外一种形态. ...

  2. androidstudio提示adb错误：cannot parse version string:kg01的解决方法

    打开adb.exe的文件目录,同时按下shift和鼠标右键,打开cmd后运行一下这个命令adb kill-server

  3. 2.C#WebAPI设置路由和参数1

    1.当我们创建WebApi的时候我们的项目下的Contorls文件夹下的ValuesController文件下会出现这么几个方法: // GET http://程序ip:程序端口/api/values ...

  4. win10下安装配置iis,发布iis

    老有朋友不会配置iis跟发布iis,今天整理一下,欢迎参考借鉴 打开控制面板 找到 程序 点击程序  找到启用或关闭windows功能 在windows服务中找到 Internet Informati ...

  5. 2、Windows下安装配置Redis

    windows下redis软件开源安装包挂载到github上,下面将详细介绍如何在windows下安装redis服务器 下载地址:https://github.com/MSOpenTech/redis ...

  6. django系列3.2--url的别名和反向解析 reverse

    命名URL和反向解析 在网页中某些要提交的地址等,需要改变的时候,此时网页过多,如果一个一个的去改,工作量巨大,这时就可以用到命名url,在html文件的模版中,只写命名,这样当需要我们改变urls. ...

  7. KVM性能优化学习笔记

    本学习笔记系列都是采用CentOS6.x操作系统,KVM虚拟机的管理也是采用virsh方式,网上的很多的文章都基于ubuntu高版本内核下,KVM的一些新的特性支持更好,本文只是记录了CentOS6. ...

  8. python redis 方法大全

    redis连接 1,安装redis pip install redis 实例: import redis from datetime import datetime r = redis.Redis(h ...

  9. leecode刷题（18）-- 报数

    leecode刷题(18)-- 报数 报数 描述: 报数序列是一个整数序列,按照其中的整数的顺序进行报数,得到下一个数.其前五项如下: 1. 1 2. 11 3. 21 4. 1211 5. 1112 ...

  10. AutoCad2012新增类AcRxVariablesDictionary 可以获取所有变量名和值

    //AutoCad2012新增类 获取所有变量名和值 AcRxVariablesDictionary *dic=AcRxVariablesDictionary::get(); const AcArra ...