前端处理模糊搜索 + 大小写不敏感

前端时间公司的微服务转化为文档数据库mongodb,除了维护微服务外,一些前端的交互功能叶需要有相应的优化调整

首次尝试,(功能实现)

  • 缺点函数局限性, 搜索一个title写一个函数,再加一个搜索需要再加一个函数,没有复用性
  • 搜索的title【key】已被写死, 不够灵活
  • 数组遍历,可读性行差,代码不优雅
onSearch (item) {
  if (!item.searchTitle || item.searchTitle === '') {
    delete item.filters
    this.$forceUpdate()
    return
  }
  item.filters = this.titleQuery(item.products, item.searchTitle)
  this.$forceUpdate()
},
// 前端模糊查询匹配 + 大小写不敏感
titleQuery (list, keyWord) {
    var arr = []
    for (var i = 0; i < list.length; i++) {
      if (list[i].title.match(new RegExp(keyWord, 'i')) != null) {
        arr.push(list[i])
      }
    }
    return arr
  },

第二次尝试

增加依赖lodash, 不将过多精力花在维护工具函数上,将重心放在业务上, 一般不需要重新安装lodash,在很多项目的开发环境依赖中已经存在lodash

一个函数搞定

从行数而言,节省了8行代码,不是我写的话就不止是8行代码了,哈哈哈哈

key值是我们需要搜索的数组对象中的属性,即为查询的key

searchTitle为我们的关键字,即为value

    onSearch (item, key) {
      if (!item.searchTitle || item.searchTitle === '') {
        delete item.filters
        this.$forceUpdate()
        return
      }
      item.filters = _.filter(item.products, (o) => {
        return (o[key].search(new RegExp(item.searchTitle, 'i'))) > -1
      })
      this.$forceUpdate()
    },

由于业务的限制,搜索功能是绑定在树形结构的二级目录上,不能影响正常的商品列表,所以我需要一个专门的过滤数组去展示搜索结果,一个专门的变量去双向绑定搜索值,很明显直接绑定在二级目录最为方便

最后需要注意的是,在我们提交数据的时候,要遍历删除我们前端维护的临时变量也就是这里的filters和searchTitle

  onSaveZone () {
      this.model.categories = this.model.categories.map(v => {
        if (v.filters) delete v.filters
        if (v.searchTitle) delete v.searchTitle
        return v
      })
      GoodsZoneAction.update(this.$route.params.id, this.model)
        .then(() => {
          this.$Message.success('保存成功')
          this.addZoneStatus = false
          this.fetchZoneModel()
        })
        .catch(err => this.$Message.error(err.msg))
    },
分享到此结束,可能还可以优化,维护更少的变量,目前没有好主意,如果有新的想法的伙伴请email到webkubor@163.com