基于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 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
js实现3D旋转效果
Aug 18 Javascript
openlayers实现地图测距测面
Sep 25 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
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
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
thinkphp5 路由分发原理
2021/03/18 PHP
优秀的计算机专业求职信范文
2013/12/27 职场文书
上课迟到检讨书
2014/01/19 职场文书
元旦促销方案
2014/03/15 职场文书
建议书的格式
2014/05/12 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
目标责任书格式
2014/07/28 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android