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. underscore collections

    1._.each(list, iterator, [context]):对集合中每一元素执行处理器方法. 如果传递了context参数,则把iterator绑定到context对象上.每次调用iter ...

  2. Python学习-6.Python的分支语句

    Python的分支语句比较简单,只有if.else.elif三个关键字,也就是说,Python没有switch语句,而且,Python中并没有?:这个三目运算符. 例子: age = 18 if ag ...

  3. onenote无法更新，提示无法流式传输、无法登陆等问题解答

    onenote无法更新,提示无法流式传输 修改DNS 4.2.2.1 和 4.2.2.2 onenote反复提示登录 升级到IE11

  4. 在linux中使用包管理器安装node.js

    网上文章中,在linux下安装node.js都是使用源码编译,其实node的github上已经提供了各个系统下使用各自的包管理器(package manager)安装node.js的方法. 1. 在U ...

  5. xshell显示隐藏窗口页签

    有时候不知道操作说了什么红框中的页签会消失,可以ctrl+shift+t 控制显示隐藏

  6. CSS3 线性渐变linear-gradient

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).为了更好的应用 CSS3 Gradient,需要先了解一下目前的几种现代浏 ...

  7. 1-初步了解C#-语言基础

    本篇博客对应视频讲解 前言 终于开始讲语言了,我选择讲C#.为什么呢?因为C#是很好的入门语言,简洁.全面,面向对象类型安全,开发体验好,上手容易.而其他的语言也已经有人讲了很多了,C#相对来说要少一 ...

  8. ClamAV学习【7】——病毒库文件格式学习

    搜查到一份详细的ClamAV病毒文件格式资料(http://download.csdn.net/detail/betabin/4215909),英文版,国内这资料不多的感觉. 重点看了下有关PE的病毒 ...

  9. 【OCP-12c】CUUG 071题库考试原题及答案解析（20）

    20.choose two Examine the description of the EMP_DETAILS table given below: Which two statements are ...

  10. Java新手学习路线

      转自网络     分享个JAVA学习路线[新手可以参考看下]觉得不好的,大家可以提出来我补充. 第一阶段 技术名称 技术内容 J2SE(java基础部分) java开发前奏 计算机基本原理,Jav ...