<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

  <link href="../../plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">

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

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

  <script src="../../plugins/jquery-1.9.1.min.js"></script>

  <script src="../../plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

  <title>Vuejs2.0 demo</title>

    <title>Title</title>

  <style type="text/css">

    .gray{

      background:red;

    }

  </style>

</head>

<body>

<div id="app">

  <input type="text" value="{{keyword}}" class="form-control" v-model="keyword"  @keyup="get($event);" @keydown.down="changeDown()"  @keydown.up="changeUp()">

  <ul>

    <li v-for="(value,index) in mydata" :class="{gray:index==now}">

       {{value}}

    </li>

  </ul>

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

</div>

<script>

  window.onload =function(){

    var mv = new Vue({

      el:"#app",

      data:{

        mydata:[],

        keyword:"",

        now:-1

      },

      methods:{

        get:function (ev) {

          if(ev.keyCode==38  || ev.keyCode==40){

            return false;

          }

          this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{wd:this.keyword},{jsonp:"cb"}).then(function(res){

                this.mydata = res.data.s;

                 console.log("成功");

          },function(){

                 console.log("失败");

          });

        },

        changeDown:function(){

          this.now++;

          if(this.now==this.mydata.length){

            this.now = -1;

          }

          this.keyword = this.mydata[this.now];

        },

        changeUp:function(){

          this.now--;

          if(this.now==-2){

            this.now = this.mydata.length-1;

          }

          this.keyword = this.mydata[this.now];

        }

      }

    });

  };

</script>

</body>

</html>

Vuejs搜索下拉框的更多相关文章

  1. ComboBox可搜索下拉框的使用注意事项,简单记录以及我遇到的一些奇怪的bug

    前几天做一个react的项目的时候需要用一个可搜索的下拉框ComboBox,上代码: <ComboBox // className={comboxClassName} items={storeA ...

  2. layui-table-column-select（layui数据表格可搜索下拉框select）

    layuiTableColumnSelect 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 码云地址:https://gitee.com/yangqianlong9 ...

  3. Combo Select – jQuery可搜索下拉框插件

    今天用到另一款jq插件..插件就是无脑,,引入相关文件,开始撸吧 引入相关文件: <link href="~/Scripts/combo-select/combo.select.css ...

  4. element-ui select可搜索下拉框无法在IOS或Ipad调起小键盘输入法

    参考:https://segmentfault.com/q/1010000021748033 原因:常规select是可以调起小键盘的.但是element-ui的select其实是input.并且这个 ...

  5. WordPress博客插件程序:搜索下拉框openSug

    百度搜索框下拉提示Wordpress组插件. 下载地址:https://www.opensug.org/faq/wp-content/uploads/2018/12/opensug.wordpress ...

  6. jquery 仿百度搜索下拉框的插件

    转载地址:http://www.open-open.com/lib/view/open1420624048437.html 今天写了个下拉插件分享出来 效果: , 可以搜素,也可以使用上下键选择匹配出 ...

  7. z-blog博客组插件openSug.js百度搜索下拉框提示代码

      z-blog安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让z-blog搜索更便捷! https://www.opensug.org/.../opensug_z-blog_v1.0 ...

  8. Discuz论坛搜索下拉框插件openSug

    Discuz!只需安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让您的Discuz搜索更便捷! 下载:https://www.opensug.org/faq/.../opensug.d ...

  9. MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框

    1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...

随机推荐

  1. 【nodejs】修改了下对股票表进行crud操作的代码

    表是这样的: id是自增长字段,code和name都是255位的varchar. 下面是主角app.js的代码: 'use strict'; var express=require('express' ...

  2. iOS开发系列课程预告

    近期在Mac和iOS上做开发,认为应该写一点东西分享给感兴趣的童鞋们.在此之前.以前有非常多同行们都在埋怨苹果Objective-C的复杂和难以上手,为此也有非常多人对今年(2014年)刚推出的Swi ...

  3. 深入研究嵌入式web服务器的视频监控应用

    http://embed.chinaitlab.com/pc/776136.html uCLinux下,主要有3个Web Server:Httpd.Thttpd和BOA.Httpd是最简单的一个Web ...

  4. Shell或notepad连接虚拟机操作

    首先在linux终端中查看自己的ip:ifconfig -a 一.Xshell的配置如下: 上图中: 处填写的是昵称,方便记住这个会话连接的是哪个系统. 要选择SSH,因为安装的是OpenSSH 处填 ...

  5. 电脑PE系统工具

    自己收集的一些PE电脑维护工具 电脑店PE工具 http://u.diannaodian.com/ 通用PE工具箱 http://www.tongyongpe.com/ 大白菜PE工具 http:// ...

  6. ng-src 的坑

    问题: <ion-slide ng-repeat="item in bannrImgData" ng-click="getActivity($index)" ...

  7. java各种框架的比较，分析

    Spring 框架 优点 1.提供了一种管理对象的方法,可以把中间层的对象有效地组织起来 2.采用了分层结构,可以增量引入到项目中. 3.代码测试较容易 4.非侵入性,应用程序对Spring API的 ...

  8. WebApi 数据保护操作未成功。这可能是由于未为当前线程的用户上下文加载用户配置文件导致的。当线程执行模拟时，可能会出现此情况。","ExceptionType":"System.Security.Cryptography.CryptographicException","StackTrace

    在调用System.Security.Cryptography.ProtectedData.Protect方法来保护私密信息时,IIS可能会报以下错误:CryptographicException: ...

  9. 自己动手写处理器之第二阶段（2）——Verilog HDL简单介绍

    将陆续上传本人写的新书<自己动手写处理器>(尚未出版),今天是第六篇.我尽量每周四篇 2.3 Verilog HDL简单介绍 本书实现的OpenMIPS处理器是使用Verilog HDL编 ...

  10. js 面向对象式编程

    1.声明一个函数,在函数内进行初始化操作,,函数不能有返回值2.把需要的参数传递进去,参数最好以对象形式传入,如果有默认的设置默认参数3.把传入的参数都保存到对象的属性上面4.把初始化操作中需要用到的 ...