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. ASP.NET Core2实现静默获取微信公众号的用户OpenId

    最近在做个微信公众号的项目,需要将入口放置在公众号二级菜单内,通过点击该菜单链接后进入到该项目中去,进入到项目后程序会自动通过微信公众号的API完成用户的OpenId获取.需求很简单,实现起来也不复杂 ...

  2. [转载]MVC、MVP以及Model2(下)

    通过采用MVC模式,我们可以将可视化UI元素的呈现.UI处理逻辑和业务逻辑分别定义在View.Controller和Model中,但是对于三者之间的交互,MVC并没有进行严格的限制.最为典型的就是允许 ...

  3. [Git00] Pro Git 一二章读书笔记

    记得知乎以前有个问题说:如果用一天的时间学习一门技能,选什么好?里面有个说学会Git是个很不错选择,今天就抽时间感受下Git的魅力吧.   Pro Git (Scott Chacon) 读书笔记:   ...

  4. Docker在github上的站点

    https://github.com/docker (docker在github上的官方地址) https://github.com/dockerfile (docker官方镜像的Dockerfile ...

  5. Navicat 连接阿里云RDS

    背景: Navicat 是一个非常优秀与易用的数据库可视化管理软件,相信很多人都用过.这次服务器升级,数据库用了阿里云的RDS,阿里云自带的数据库管理面板功能有限,用不习惯.所以还是想着用 Navic ...

  6. if、else if 、else及switch...case使用小记（C#）

    有时候编程编的久了,如果不停下来认真思考一下,即便是一些最基础的知识点,也可能让自己懵圈.其实,说到底还是打基础的时候没打牢,或者说自以为是地认为自己懂了,然后在打基础的时候就懒得思考懒得看了,结果就 ...

  7. Mycat SqlServer Do not have slave connection to use, use master connection instead

    Do not have slave connection to use, use master connection instead 很奇怪啊 都是按照配置配置的 怎么就是不通呢 有点怀疑人生了吧 其 ...

  8. php中的XML DOM（10）

    1.PHP DOM (1) Php中的DOM跟javascript不一样,属性不用另外增加一个节点 2.主要类 DOMDocument :文档类 DOMNodeList :节点列表类 DOMNode ...

  9. 解决：sql server无法在C盘下创建database/操作系统错误5（拒绝访问）

    问题: ——无法在C盘的任何位置创建数据库文件 ——在非系统盘的F盘可以创建数据库文件 解决方法1:禁用“以管理员批准模式运行所有管理员" 解决方法2:打开C盘对Users用户的完全控制权限 ...

  10. [CSS3] 二级下拉导航

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...