使用Bootrap和Vue實現仿百度搜索功能

2019-11-19 15:04:23

字體：大中小

來源：轉載

供稿：網友

用Vue調用百度的搜索接口，實現簡單的搜索功能。

搜索框的樣式是基于Bootstrap，當然對樣式做了簡單的調整，使之類似于百度搜索。代碼如下

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>百度搜索</title>  <style type="text/css">    .gray{      background-color: #eee;    }    .listyle{      font-size: 16px;      line-height: 35px;      padding-left: 16px;    }    .ulstyle{      border:1px solid #ccc;      border-top: none;    }  </style>  <link rel="stylesheet" type="text/css" href="bootstrap.min.css" rel="external nofollow" >  <script type="text/javascript" src="vue.js"></script>  <script type="text/javascript" src="vue-resource.js"></script>  <script type="text/javascript">    window.onload = function(){      new Vue({        el: ".container",        data: {          myData:[],          txt:"",          nowIndex:-1        },        methods:{          get:function(event){            if(event.keyCode==38 || event.keyCode==40){              return;            }            if(event.keyCode==13){              window.open("https://www.baidu.com/s?wd="+this.txt);              this.txt="";            }            this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{              wd:this.txt            },{              jsonp:"cb"            }).then(function(res){              this.myData=res.data.s            },function(res){              alert(res.status);            });          },          changeDown:function(){            this.nowIndex++;            if(this.nowIndex==this.myData.length){              this.nowIndex=0;              this.txt=this.myData[0];            }else{              this.txt=this.myData[this.nowIndex];            }          },          changeUp:function(){            this.nowIndex--;            if(this.nowIndex==-1){              this.nowIndex=this.myData.length-1;              this.txt=this.myData[this.nowIndex];            }else{              this.txt=this.myData[this.nowIndex];            }          },          mouseOver:function(n){            this.nowIndex=n;            this.txt=this.myData[this.nowIndex];          },          getMsg:function(){            window.open("https://www.baidu.com/s?wd="+this.txt);            this.txt="";          }        }      });    }  </script></head><body>  <br>  <div class="container">    <div class="input-group">      <input type="text" class="form-control input-lg" placeholder="請輸入關鍵字" v-model="txt" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up="changeUp()">      <span class="input-group-btn">        <button class="btn btn-default btn-lg" type="button" @click="getMsg()">搜索</button>      </span>    </div>    <ul class="list-unstyled ulstyle" v-show="myData.length!=0">      <li v-for="item in myData" :class={gray:$index==nowIndex,listyle:true} @mouseover="mouseOver($index)" @click="getMsg()">{{item}}</li>    </ul>  </div></body></html>

實現效果如下

這里寫圖片描述