<!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. Discuz上传错误

    换了服务器后,上传图片的时候,显示上传100%,然后报错:upload error: 500.怎么回事那? [解决方法] 原来是php上传文件的时候,会首先上传到一个临时目录.如果临时目录没有权限,就 ...

  2. ML—朴素贝叶斯

    华电北风吹 日期:2015/12/12 朴素贝叶斯算法和高斯判别分析一样同属于生成模型.但朴素贝叶斯算法须要特征条件独立性如果,即样本各个特征之间相互独立. 一.朴素贝叶斯模型 朴素贝叶斯算法通过训练 ...

  3. MySQL的IF函数

    格式:IF(Condition,A,B) 意义:当Condition为TRUE时,返回A:当Condition为FALSE时,返回B. 作用:作为条件语句使用. 例子: SELECT    fullN ...

  4. IN 查询时出现ORA-01795:列表中的最大表达式数为1000解决方法

    问题描写叙述: SQL进行IN查询时出现:java.sql.SQLException: ORA-01795: 列表中的最大表达式数为 1000 解决的方法: 问题原因是:SQL进行IN查询时.IN中的 ...

  5. 【Linux学习】Ubuntu下内核编译(一)

    (1)当要运行内核配置时,输入make menuconfig时出现错误 遇到这个问题,主要是以为没有ncurses库,而make menconfig 须要这个库.因此须要安装ncurses或者ncur ...

  6. 《Java程序设计》第16周周四：GUI编程及文件对话框的使用

    第一部分:实验项目  项目一:文件及选择 目的:了解文件对话框的用法,熟悉GUI中事件驱动的核心步骤. 1. 阅读博文 "JFileChooser (Java Swing提供的文件选择对话框 ...

  7. android 实现QQ好友列表

    在某些Android开发群里,看到有些新手问怎么实现QQ好友列表,其实网上一搜挺多的.接触Android,也才一年的时间,大部分时间花在工作上(解bug...),界面上开发很少参与.自己维护的系统应用 ...

  8. 如何使php页面中不再出现NOTICE和DEPRECATED的错误提示

    在php.ini配置文件中修改: error_reporting=E_ALL & ~E_NOTICE & ~E_DEPRECATED 亲测有效,拿去用吧

  9. 分享一个php代码创建目录的Demo

    /* * 连续建目录 * string $dir 目录字符串 * int $mode 权限数字 * 返回:顺利创建或者全部已建返回true,其它方式返回false */ function makeDi ...

  10. aop注解 spring提供的事务

    http://www.cnblogs.com/friends-wf/p/3826893.html 是 自定义的切面,并且添加注解 声明为切面 利用spring提供的事务声明 主要在 service层上 ...