一、前期準(zhǔn)備

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),荔波企業(yè)網(wǎng)站建設(shè),荔波品牌網(wǎng)站建設(shè),網(wǎng)站定制,荔波網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,荔波網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

網(wǎng)上大神已經(jīng)做過這個功能https://github.com/lavyun/vue-demo-search 這自己僅實現(xiàn)搜索功能
為了使用百度實現(xiàn)搜索功能，首先搞清楚下拉數(shù)據(jù)和搜索功能的數(shù)據(jù)接口

01、提示數(shù)據(jù)獲取地址

打開百度官網(wǎng)打開開發(fā)者調(diào)試工具，選中network一項，然后我們在搜索框輸入'a',將會network發(fā)送的請求，這個就是提示數(shù)據(jù)的數(shù)據(jù)獲取地址

提示數(shù)據(jù)獲取地址.png

然后簡化一下：

其中“wd=”后接搜索的關(guān)鍵字，“cb=”后接回調(diào)函數(shù)

輸入a時，請求的提示數(shù)據(jù)

02：搜索功能實現(xiàn)地址

在輸入框中輸入“a”之后，點擊搜索按鈕之后，地址欄中地址就是實現(xiàn)搜索功能的地址

搜索地址.png

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

簡化地址.png

我們使用簡化之后的地址，搜索關(guān)鍵字“s‘'測試一下

測試.png

二、代碼實現(xiàn)

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代碼

  
baidu-search
  
  

    
{{value}}
  
  
(*^__^*)暫時沒有數(shù)據(jù)

get方法實現(xiàn)獲取下拉數(shù)據(jù)和搜索功能，輸入keyword之后，調(diào)用get方法使用jsonp獲取提示數(shù)據(jù)，然后賦值給myData，然后使用v-for遍歷提示數(shù)據(jù)

提示數(shù)據(jù).png

然后selectDown和selectUp實現(xiàn)上下選中數(shù)據(jù)，當(dāng)按下回車鍵時，實現(xiàn)搜索
完整代碼：https://github.com/yanqiangmiffy/baidu-search

三、實現(xiàn)效果

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。