一、前期準備

網上大神已經做過這個功能https://github.com/lavyun/vue-demo-search 這自己僅實現搜尋功能
為了使用百度實現搜尋功能，首先搞清楚下拉資料和搜尋功能的資料介面
01：提示資料獲取地址
開啟百度官網開啟開發者除錯工具，選中network一項，然後我們在搜尋框輸入'a',將會network傳送的請求，這個就是提示資料的資料獲取地址

然後簡化一下：

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jQuery110208352732182923484_1497924041050&_=1497924041057#
 

其中“wd=”後接搜尋的關鍵字，“cb=”後接回撥函式

02：搜尋功能實現地址
在輸入框中輸入“a”之後，點選搜尋按鈕之後，位址列中地址就是實現搜尋功能的地址

搜尋地址簡化前後對比，是不是看起來很舒服了O(∩_∩)O

我們使用簡化之後的地址，搜尋關鍵字“s‘’測試一下

二、程式碼實現

js程式碼

  new Vue({
        el:'#app',
        data:{
            myData:[],
            keyword:'',
            now:-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.keyword);
                    this.keyword=''
                }
                this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                    wd:this.keyword
                },{
                    jsonp:'cb'
                }).then(function (res) {
                    this.myData=res.data.s;
                },function () {

                });
            },
            selectDown:function () {
                this.now++;
                if(this.now==this.myData.length)this.now=-1;
                this.keyword=this.myData[this.now];
            },
            selectUp:function () {
                this.now--;
                if(this.now==-2)this.now=this.myData.length-1;
                this.keyword=this.myData[this.now];
            }
        }
    })
 

html程式碼

<div class="container search-container" id="app">
    <h1 class="title" >baidu-search</h1>
    <input type="text" class="form-control" placeholder="請輸入想要搜尋關鍵字" v-model="keyword" @keyup="get($event)" @keydown.down.prevent="selectDown"
    @keydown.up.prevent="selectUp">
    <ul>
        <li class="text-center" v-for="(value,index) in myData"><span class="text-success textprimary" :class="{gray:index==now}">{{value}}</span></li>
    </ul>
    <p ><h2 v-show="myData.length==0" class="text-warning text-center">(*^__^*)暫時沒有資料</h2></p>
</div>
 

get方法實現獲取下拉資料和搜尋功能，輸入keyword之後，呼叫get方法使用jsonp獲取提示資料，然後賦值給myData，然後使用v-for遍歷提示資料

三、實現效果