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. 一键部署react到nginx上

    仅用于记录自己的程序部署 cd /home/web; rm -rf JulyNovelReact; mkdir JulyNovelReact; cd JulyNovelReact; rz; tar - ...

  2. C#之工厂

    工厂在我看来分为三种分别都是简单工厂,工厂方法,和抽象工厂,这三种都是将使用和创建分开的一种模式 接下来我来介绍一下我理解的简单工厂模式: 在平时我们需要使用生产对象的一个类当我们需要new 一个对象 ...

  3. C#实现像微信PC版一样的扫码登录功能

    现在好些网站都支持扫码登录,感觉上安全了很多,但是本地程序扫码登录的不多,就用C#实现了一下,需要作如下准备 在官网上申请一个企业微信,有条件的话做个企业认证吧,我们的是认证过的,所以账号和本地其他系 ...

  4. DevExpress GridControl使用教程：之 添加 checkbox 复选框

    添加一列,FieldName为"FLAG",将ColumnEdit设置为复选框样式. gridview1   =>optionsbehavior =>  editabl ...

  5. DataGridViewComboBoxColumn值无效解决方法

    值无效,可能是你下拉框选项,没有这样的值,而你却设置这个值. dataGridView1.Rows[i].Cells[1].Value = "选项一"; 解决方法就是在窗体的构造函 ...

  6. Impala源码之订阅发布系统的实现

    本文由  网易云发布. 作者:冯宇 本篇文章仅限内部分享,如需转载,请联系网易获取授权. 本文是Impala源码笔记的第一篇,本文主要根据源代码学习一下statestored模块的实现,众所周知,Im ...

  7. iOS 添加字体

    1. 将字体(ttf 文件)导入项目. 2. 在项目plist 文件里的 Fonts provided by application 添加新导入的字体. 3. 代码中的调用 [aLabel setFo ...

  8. Spring-JDBDTamplate 的操作

    基本的    增,删,改:(只演示增加 因为他们调用的方法都是update方法): package com.hxzy.spring_jdbc_template; import org.springfr ...

  9. 利用C# CefSharp Python采集某网站简历并自动发送邀请短信

    以往爬虫没怎么研究过,最近有个需求,要从某网站采集敏感信息,稍稍考虑了一下,决定利用C# Winform和Python一起来解决这个事件. 整个解决方案不复杂:C#编写WinForm窗体,进行数据分析 ...

  10. jzoj5813

    tj:可以知道,隨意構造一個數列x,且x的第i位被n整除的方案是(約數個數)^2m,因為所有數可以隨便選,只要這個數能被n整除即可,方案為約數個數 設一個合法數列a的f值為x,則x小於n^m 假設所有 ...