美文网首页
纯前端多字段模糊搜索

纯前端多字段模糊搜索

作者: 简小咖 | 来源:发表于2023-03-28 17:00 被阅读0次

    1、 如果所有字段全部过滤

    function multiQuery(arr, q) {
      return arr.filter((v) => {
        return Object.values(v).some((v) => new RegExp(q + '').test(v))
      })
    }
    

    2、 如果指定部分字段进行过滤

    function multiQuery(arr, q, attr) {
      return arr.filter((v) => {
        const filteredObject = Object.fromEntries(
          Object.entries(v).filter(([key]) => attr.includes(key))
        )
        return Object.values(filteredObject).some((v) => new RegExp(q + '').test(v))
      })
    }
    

    举例分析

    const arr = [
      { title: 'title1', name: 'aaaa', description: 'AAAAAA' },
      { title: 'title2', name: 'bbbb', description: 'BBBBBBB' },
      { title: 'title3', name: 'ccccc', description: 'CCCCCC' }
    ]
    const filteredAttr = { 'name' ,  'description' }
    
    
    const filteredObject = Object.fromEntries(
          Object.entries(v).filter(([key]) => attr.includes(key))
        )
    
    // 打印结果就是 { name: 'aaaa', description: 'AAAAAA'  }
    //  { name: 'bbbb', description: 'BBBBBBB' }
    //  { name: 'ccccc', description: 'CCCCCC' }
    

    这个里 filteredObject打印出来 { name: 'aaaa', description: 'AAAAAA' }
    过滤出来两个属性,然后再进行关键字过滤

    multiQuery(arr, 'c', filteredAttr)
    
    // 打印结果就是 [  { title: 'title3', name: 'ccccc', description: 'CCCCCC' } ]
    

    相关文章

      网友评论

          本文标题:纯前端多字段模糊搜索

          本文链接:https://www.haomeiwen.com/subject/gpqxddtx.html