Vuejs搜索下拉框

<!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搜索下拉框

最新文章

热门文章
