<!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. 拼接多个 wchar_t *

      /* wcscat example */ #include <wchar.h>   int main () { wchar_t wcs[80]; wcscpy (wcs,L" ...

  2. 在Fedora8上安装MySQL5.0.45的过程

    本来想安装最新的5.6.13-1版本,下载下来后,依赖的包rpmlib无处下载,无法只得作罢.从Foreda8的安装光盘中找到了以下文件: mysql-5.0.45-4.fc8.i386.rpm my ...

  3. getaddrinfo()函数详解

    Socket的地址查询函数 http://blog.sina.com.cn/s/blog_988c054b010139e3.html http://www.cnblogs.com/cxz2009/ar ...

  4. java统计abacbacdadbc中的每个字母出现的次数，输出格式是：a(4)b(3)c(3)d(2)

    import java.util.Iterator; import java.util.Map; import java.util.Set; import java.util.TreeMap; /* ...

  5. Android：Dialog中隐藏键盘的注意事项

    场景:弹出一个Dialog.里面有一个EditText.用来输入内容.由于输入时.须要弹出键盘.所以当Dialog消失时.键盘要一起隐藏. 如今我们做一个自己定义的Dialog MyDialog ex ...

  6. 解决-bash: fork: retry: Resource temporarily unavailable (修改最大线程数)

    错误提示的本质是Linux操作系统无法创建更多进程,导致出错.因此要解决这个问题需要修改Linux允许创建更多的进程. 方案一: cat /etc/security/limits.conf echo ...

  7. js setInterval() 用法示例

      Created by Marydon on 1.定义 语法:setInterval(param1,param2) param1 要调用的函数或要执行的代码串. param2 周期性调用param1 ...

  8. 【Oracle】事务处理

    名词解释 DML:Data Manipulation Language (数据库操纵语言) 例如:DELETE.INSERT.UPDATE.SELECT DDL:Data Definition Lan ...

  9. java开发工具之myeclipse调优

    -vmargs -Xms512m //堆的最小值-Xmx512m //堆的最大值(两者设置相同,避免运行时的自动扩张)-XX:PermSize=256m //永久代的最小值 -XX:MaxPermSi ...

  10. 用css3做一个求婚小动画

    概述 本案例主要是运用到了css3的animation.keyframes.transform等属性,熟悉了,就可以做更多的其他动画效果,这几个属性功能非常强大. 详细 代码下载:http://www ...