<!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. 【图解】javaScript组成结构

  2. nyoj-659-推断三角形(大坑)

    推断三角形 时间限制:1000 ms  |  内存限制:65535 KB 难度: 描写叙述 小明非常喜欢研究三角形.如今,小明已经知道三角形的三条边.假设三条边能组成三角形,小明就会非常高兴,他就会得 ...

  3. 通过HTML5 Visibility API检测页面活动状态

    几年前,我们浏览网页的时候是没有选项卡浏览模式的,每一个网页都会是一个浏览器窗口,如果我没有记错,Win7之前我们都是这样浏览网页的.作为一个程序员,我们经常会同时打开10-15个网页,多的时候超过2 ...

  4. DevExpress学习03——label控件的背景色问题

    今天使用了DevExpress的labelControl,发现拖放上去,其背景色和主窗体的背景一样,非常不谐调,把BackColor设置为透明也不行(Windows中的Label可以). 没有办法,我 ...

  5. Memcached--分布式缓存安装教程

    Memcached的Windows版本在这里下载http://code.google.com/p/memcached/wiki/PlatformWindows(或http://memcachedpro ...

  6. npm之使用淘宝源

    暂时使用: npm --registry https://registry.npm.taobao.org i express 永久使用: npm conf set registry https://r ...

  7. 在线sass编译器

    工作中,我们可能遇到突发情况(无法安装考拉,gulp以及webpack以及其它的自动化工具),我们这时就要用即时编译工具了,那么它就是你的首选: http://tool.oschina.net/

  8. 算法笔记_120:蓝桥杯第六届省赛（Java语言B组部分习题）试题解答

     目录 1 三角形面积 2 立方变自身 3 三羊献瑞 4 九数组分数 5 饮料换购 6 生命之树   前言:以下试题解答代码部分仅供参考,若有不当之处,还请路过的同学提醒一下~ 1 三角形面积 三角形 ...

  9. Oracle常用标准表

    一.INV(库存) 子库存:mtl_secondary_inventories 事物处理:mtl_material_transactions mmt 事务处理来源类型:mtl_txn_source_t ...

  10. 关于LoadRunner的迭代

    通过用lr做负载压力测试过程发现,如果设定不同的action迭代次数,每次得出的结果是不同的,曲线的表现形式也是不同的.这点就使我们会感觉困惑,为什么要设置action的迭代次数?以及对于不同的应用系 ...