快捷導(dǎo)航

基于Vue el-autocomplete 實現(xiàn)類似百度搜索框功能

更新時間：2019年10月25日 11:26:33 作者：xu_song

本文通過代碼給大家介紹了Vue el-autocomplete 實現(xiàn)類似百度搜索框功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下

效果圖如下所示：

首先上代碼

<template>
  <div class="assets-search height-all">
    <div class="search-layout">
      <div class="search-title">讓數(shù)據(jù)觸手可及</div>
      <div class="search-input-layout">
        <!--<el-input class="search-input" placeholder="檢索數(shù)據(jù)"
             @keyup.enter.native="searchAssets($event)"
             v-model="searchContent">
          <el-button style="color: white"
                @click="searchAssets(searchContent)"
                slot="append">搜 索</el-button>
        </el-input>-->
        <el-autocomplete
          class="inline-input search-input"
          v-model="searchContent"
          ref="autocomplete"
          :fetch-suggestions="requestDoSuggest"
          placeholder="請輸入您需要檢索資源名稱或者中文"
          @keyup.enter.native="searchAssets($event)"
          :trigger-on-focus="false"
          @select="handleSelect"
        >
          <el-button @click="searchAssets" slot="append">搜 索</el-button>
        </el-autocomplete>
        <div class="search-word-layout" v-show="searchWordList.length">
          <span class="search-word-title">熱門搜索：</span>
          <div class="search-word-list">
            <span class="search-word"
                v-for="(item, index) in searchWordList"
                @click="clickHotWord(item)"
                :key="index">{{item}}</span>
          </div>
        </div>
      </div>
      <el-button v-if="false" class="db-number-layout">{{`資產(chǎn)庫：${ddNumber}`}}</el-button>
    </div>
  </div>
</template>
<script>
  import {mapActions } from 'vuex';
  export default {
    name: "search",
    created() {
      this.requestHotWord();
    },
    data() {
      return {
        searchContent:'',
        ddNumber:3445,
        searchWordList:[],
        hotWordSize:5,
      }
    },
    methods:{
      ...mapActions(['_AJAX']),
      /**
       * 點擊熱詞搜索
       */
      clickHotWord(item) {
        this.searchContent = item;
        this.searchAssets();
      },
      /**
       * 跳轉(zhuǎn)到搜索結(jié)果頁面
       */
      searchAssets(event) {
        if (event) {
          event.target.blur();
          this.$refs.autocomplete.close();
        }
        let viewRoute = this.$router.resolve({
          path: '/assets/searchResult',
          query: {
            searchContent: this.searchContent,
          }
        });
        window.open(viewRoute.href, '_blank');
      },
      /**
       * 自動補(bǔ)全
       */
      requestDoSuggest(queryString, cb) {
        let params = {
          url: 'esSearch.doSuggest',
          data: {
            input: queryString,
            size:4,
          },
          method: 'GET'
        };
        this._AJAX(params)
          .then(res => {
            let list = res.result.map((item)=>{
              return {value:item}
            })
            cb(list);
          })
      },
      /**
       * 選擇聯(lián)想出來的數(shù)據(jù)
       */
      handleSelect(item) {
        this.searchContent = item.value;
        this.searchAssets();
      },
      /**
       * 請求熱詞列表
       */
      requestHotWord() {
        let params = {
          url: 'esSearch.queryHotWord',
          data: {
            size:this.hotWordSize,
          },
          method: 'GET'
        };
        this._AJAX(params)
          .then(res => {
            this.searchWordList = res.result;
          })
      }
    },
  }
</script>
<style lang="scss">
  .assets-search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #6ba9ec;
    .search-layout{
      text-align: center;
      .search-title{
        font-size: 50px;
        color: white;
        font-weight: bold;
        padding-bottom: 40px;
      }
      .search-input-layout{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .search-input{
          width: 50%;
        }
        .search-word-layout{
          text-align: left;
          width: 50%;
          padding: 15px;
          display: flex;
          flex-direction: row;
          align-items: center;
          .search-word-title{
            font-size: 15px;
            color: white;
          }
          .search-word-list{
            span:hover{
              color: #666666;
            }
          }
          .search-word{
            font-size: 15px;
            color: white;
            padding-right: 10px;
            cursor: pointer;
          }
        }
      }
      .db-number-layout{
        margin-top: 80px;
      }
    }
    .el-input-group--append .el-input__inner {
      border-radius: 0;
      height: 48px;
      line-height: 48px;
    }
    .el-input-group__append {
      background: $color-assist;
      border-color: $color-assist;
      border-radius: 0;
      color: white;
    }
  }
</style>

注意的細(xì)節(jié)

基礎(chǔ)使用

fetch-suggestions 這個方法是去請求包含關(guān)鍵字的搜索功能，這里注意返回結(jié)果里面的列表對象屬性里面要有一個value的屬性，這個才能顯示，聯(lián)想輸入內(nèi)容。

select 方法是選擇了一個聯(lián)想輸入的具體數(shù)據(jù)的點擊事件

注意事項

按enter鍵進(jìn)行搜索功能@keyup.enter.native="searchAssets(event)"，有些人會好奇，這個 event)"，有些人會好奇，這個event)"，有些人會好奇，這個event是一個什么東西，其實就是一個事件，代碼

if (event) {
   event.target.blur();
   this.$refs.autocomplete.close();
}

這個是為了處理點擊enter使input輸入框失去焦點，還有一個作用就是，讓el-autocomplete 的聯(lián)想輸入框關(guān)閉。這個達(dá)到和百度搜索類似的效果。

總結(jié)

以上所述是小編給大家介紹的基于Vue el-autocomplete 實現(xiàn)類似百度搜索框功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: