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>

 

posted @ 2017-05-07 17:41  N神3  阅读(2598)  评论(0)  编辑  收藏  举报