快捷導(dǎo)航

Vue實現(xiàn)百度下拉提示搜索功能

更新時間：2017年06月21日 16:38:55 作者：致Great

這篇文章主要為大家詳細介紹了Vue實現(xiàn)百度下拉提示搜索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、前期準備

網(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

然后簡化一下：

復(fù)制代碼代碼如下:

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

其中“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代碼

<div class="container search-container" id="app">
  <h1 class="title" >baidu-search</h1>
  <input type="text" class="form-control" placeholder="請輸入想要搜索關(guān)鍵字" 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">(*^__^*)暫時沒有數(shù)據(jù)</h2></p>
</div>

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