基于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 相关文章推荐
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
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
php SQL之where语句生成器
2009/03/24 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
php生成短网址示例
2014/05/05 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
python比较两个列表大小的方法
2015/07/11 Python
Python的语言类型(详解)
2017/06/24 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
python在文本开头插入一行的实例
2018/05/02 Python
Python常用库大全及简要说明
2020/01/17 Python
pandas apply多线程实现代码
2020/08/17 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
监理员的岗位职责
2013/11/13 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
房地产项目建议书
2014/03/12 职场文书
网络宣传方案
2014/03/15 职场文书
企业安全标语
2014/06/07 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技