基于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 相关文章推荐
Javascript调试工具(下载)
Jan 09 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 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制作万年历
2015/01/07 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
Django工程的分层结构详解
2019/07/18 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
python扫描线填充算法详解
2020/02/19 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
个人简历的自荐信
2013/10/23 职场文书
秘书英文求职信
2014/04/16 职场文书
员工工作自我评价
2014/09/26 职场文书
综合办公室岗位职责
2015/04/11 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android