写点什么

前端开发:自定义搜索框(含联想搜索)

用户头像
三掌柜
关注
发布于: 2021 年 03 月 22 日
前端开发:自定义搜索框(含联想搜索)

在前端开发过程中,搜索功能是比较常见的功能,也是在项目开发过程中比较常见的需求。搜索框功能常用的几种需求也都是大同小异,但是实用的搜索框可以作为一个例子来写是很有必要的,那么本篇博文就来分享一下前端开发的具有联想功能的自定义搜索框。

带联想功能的搜索框的具体实现步骤也不复杂,主要是逻辑处理那块要小心,本案例以搜索员工信息的需求来做说明,具体操作如下所示:

<template>
 <div class="information-content">
        <div class="batch-search">
          <div class="bindingbtn">
            <input
              type="text"
              placeholder="请输入工号或姓名匹配查找"
              v-model=“employee”
              class="input_type"
              @change="changeEvent"
            />
            <div class="inputicon" @click="clearValue">
              <img src="~@/assets/svg/yonghu.png" height="30" width="30" />
            </div>
          </div>
          <div class="search-result" v-show="isshow">
            <p v-for="(item, index) in selectEmployees" :key="index"  @click="searchResult(item)">
              {{ item.jobNumber }} {{ item.name }}
            </p>
         </div>
<!-- 无数据时候展示占位符 -->
<van-empty v-if="selectEmployees.length === 0" description="暂无数据" />
        </div>
      </div>
</template>
<script>
export default {
  data() {
    return {
      isshow: true,
      employee: "",
      //这个数组就是员工信息的数据源,本案例直接写死数据方便查阅,实际情况是需要根据接口获取之后赋值即可。
      allEmployees: [
         {"name”:”三掌柜1”,”jobNumber":"B1-63354","deptId":1265,"deptName”:”架构部-架构一部”,”jobType":"1"},
         {"name”:”三掌柜2","jobNumber":"B1-63359","deptId":1265,"deptName":"产品部-产品发展部","jobType":"1"},
         {"name”:”三掌柜3","jobNumber":"B1-63358","deptId":1265,"deptName”:”架构部-架构二部”,”jobType":"1"},
      ],
      selectEmployees: [],
      inputvalue: "",
    };
  },
  watch: {
    employee: function (val, oldVal) {
      if (val.length == 0) {
        this.isshow = false;
      } else {
        this.isshow = true;
        var employees = [];
        this.allEmployees.forEach((item, index) => {
          if (item.indexOf(val) >= 0) {
            employees.unshift(item);
          }
        });
        this.selectEmployees = employees;
      }
    },
  },
 methods: {
    //清空输入框
    clearValue() {
      this.inputvalue = "";
    //  if (this.inputOtion.autostorage) {
    //    window.localStorage.setItem(
    //      this.inputOtion.storagename,
    //     this.inputvalue
    //   );
    // }
    },
    changeValue: function (value) {
      this.inputvalue = value;
    },
   searchResult(item) {
      this.isshow = false;
      this.$emit("changeEvent", item); //把输入框的value传出去
    },
  },
}
</script>
<style lang="scss">
.search-box {
  position: relative;
  .batch-search {
    margin: 15px;
    .bindingbtn {
      border: 1px solid #000;
      display: flex;
      border-radius: 5px;
      padding: 5px 10px 5px 10px;
      .input_type {
        height: px2em(30);
        border: none;
        background: none;
        flex: 1;
      }
      .no-msg {
        margin-top: 20px;
      }
      .inputicon {
        img {
          width: px2em(30);
          height: px2em(30);
        }
      }
    }
    .search-result {
      z-index: 10;
      position: absolute;
      padding-left: 15px;
      left: 0;
      top: 60px;
      width: 100%;
      height: px2rem(100);
      overflow-y: hidden;
      background: #fff;
    }
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}
</style>
复制代码


大概的效果图如下所示:


上面就是全部功能的实现代码,如有不懂之处请留言,博主乐意解答任何疑问,也欢迎交流,共同进步。


以上就是本章全部内容,欢迎关注三掌柜的微信公众号“程序猿 by 三掌柜”,三掌柜的新浪微博“三掌柜 666”,欢迎关注!

三掌柜的微信公众号:


三掌柜的新浪微博:


发布于: 2021 年 03 月 22 日阅读数: 10
用户头像

三掌柜

关注

某某某技术有限责任公司架构师 2021.02.05 加入

一分耕耘,不一定有一分收获,但十分耕耘,一定会有一分收获!

评论 (1 条评论)

发布
用户头像
3月日更打卡第十五天
2021 年 03 月 23 日 08:54
回复
没有更多了
前端开发:自定义搜索框(含联想搜索)