基于Vue el-autocomplete 实现类似百度搜索框功能

效果图如下所示：

首先上代码

<template>
  <div class="assets-search height-all">
    <div class="search-layout">
      <div class="search-title">让数据触手可及</div>
      <div class="search-input-layout">
        <!--<el-input class="search-input" placeholder="检索数据"
             @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">{{`资产库：${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();
      },
      /**
       * 跳转到搜索结果页面
       */
      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');
      },
      /**
       * 自动补全
       */
      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);
          })
      },
      /**
       * 选择联想出来的数据
       */
      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>

注意的细节

基础使用

fetch-suggestions 这个方法是去请求包含关键字的搜索功能，这里注意返回结果里面的列表对象属性里面要有一个value的属性，这个才能显示，联想输入内容。

select 方法是选择了一个联想输入的具体数据的点击事件

注意事项

按enter键进行搜索功能@keyup.enter.native="searchAssets(event)"，有些人会好奇，这个 event)"，有些人会好奇，这个event)"，有些人会好奇，这个event是一个什么东西，其实就是一个事件，代码

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

这个是为了处理点击enter使input输入框失去焦点，还有一个作用就是，让el-autocomplete 的联想输入框关闭。这个达到和百度搜索类似的效果。

总结

以上所述是小编给大家介绍的基于Vue el-autocomplete 实现类似百度搜索框功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！