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


Posted in Javascript onOctober 25, 2019

效果图如下所示:

基于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 实现类似百度搜索框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
IE 当eval遇上function的处理
Aug 09 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
vue实现评论列表功能
Oct 25 #Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 #Javascript
浅谈layui 表单元素的选中问题
Oct 25 #Javascript
layUI的验证码功能及校验实例
Oct 25 #Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 #Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 #Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 #Javascript
You might like
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
Python实现的堆排序算法示例
2018/04/29 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
python截取两个单词之间的内容方法
2018/12/25 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
办公文员的工作岗位职责
2013/11/12 职场文书
中专生的个人自我评价
2013/12/11 职场文书
怎样写演讲稿
2014/01/04 职场文书
化学教育专业自荐信
2014/07/04 职场文书
运动会演讲稿50字
2014/08/25 职场文书
学籍证明模板
2015/06/18 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
vue+echarts实现多条折线图
2022/03/21 Vue.js