基于vue的ui框架|基于Vue.js 2.0实现百度搜索框效果

【www.bbyears.com--flex】

 
 
 
 
 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-resource/1.3.1/vue-resource.min.js"></script>
 <script type="text/javascript">
 window.onload = function() {
  new Vue({
   el: "#box",
   data: {
    inputText: "",
    text: "",
    nowIndex: -1,
    result: []
   },
   methods: {
    show (ev) {
     if (ev.keyCode == 38 || ev.keyCode == 40) {
      if (this.nowIndex < -1){
       return;
      }
      if (this.nowIndex != this.result.length && this.nowIndex != -1) {
       this.inputText = this.result[this.nowIndex];
      }
      return;
     }
     if (ev.keyCode == 13) {
      window.open("https://www.baidu.com/s?wd=" + this.inputText, "_blank");
      this.inputText = "";
     }
     this.text = this.inputText;
     this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su", {
      params: {
       wd: this.inputText
      },
      jsonp: "cb"
     }).then(res => {
      this.result = res.data.s;
     })
    },
    goto () {
     window.open("https://www.baidu.com/s?wd=" + this.inputText, "_blank");
     this.inputText = "";
    },
    gotoItem(item) {
     window.open("https://www.baidu.com/s?wd=" + item, "_blank");
     this.inputText = "";
    },
    down () {
     this.nowIndex++;
     if (this.nowIndex == this.result.length) {
      this.nowIndex = -1;
      this.inputText = this.text;
     }
    },
    up () {
     this.nowIndex--;
     if (this.nowIndex < -1){
      this.nowIndex = -1;
      return;
     }
     if (this.nowIndex == -1) {
      this.nowIndex = this.result.length;
      this.inputText = this.text;
     }
    }
   }
  });
 }
 </script>

  

 
 
  
   
    
    
     
    
   
    
   
    

     {{item}}
    
   
  
 
 
 

本文来源：http://www.bbyears.com/flash/135969.html