美文网首页
前端搜索实现

前端搜索实现

作者: 薛步蝉 | 来源:发表于2020-06-14 09:22 被阅读0次

实际开发中前端实现搜索不太常见,一般来都是后台提供接口实现,但是,今日开发中遇到了,在做促销活动时,选择商品,放入促销商品列表中,然后修改商品价格,保存的逻辑,加入促销列表后的商品还没有保存,所以后台没发提供接口,而需求要求可以搜索某个商品并设置价格,于是就找了个前端插件

安装插件

 npm install --save fuse.js

使用

 this.allResult = this.formValidate.selectList1
// this.allResult 是全部列表 options是搜索条件 ,里面key为按某个属性搜索,weight是权重this.tempList是搜索结果
        var options = {
          keys: [{
            name: 'skuName',
            weight: 0.3
          }]
        }
        var fuse = new Fuse(this.allResult, options)

        this.tempList = fuse.search(this.keyWords)
        // console.log(this.tempList)
        this.formValidate.selectList1 = this.tempList

前端搜索虽然不常遇到,但是如果手写精确搜索还好,如果模糊搜索手写还是比较麻烦的

相关文章

  • 前端搜索实现

    实际开发中前端实现搜索不太常见,一般来都是后台提供接口实现,但是,今日开发中遇到了,在做促销活动时,选择商品,放入...

  • 实现前端搜索功能

    一般基于这种的话可以用计算属性

  • 前端实现搜索排序

    筛选数组 filter函数,里面检测的是下面的函数 1 .正则 reg.test(str):正则匹配到对应字符串就...

  • js 实现本地模糊搜索

    前端实现模糊搜索 indexOf、split 、match、test indexOf方法 语法:stringObj...

  • 前端本地实现搜索排序

    排序实现:首先有一个排序选择框(按某个属性进行排序),排序的触发方法: 搜索实现:首先有一个搜索框,输入点击触发搜...

  • 纯前端实现模糊搜索

    匆匆完成,待整理。。。 一、前置知识 模糊查询一般都是后台来做的,我们只需要调用接口,而且后台做这个是非常的方便,...

  • vue中基于iview封装支持搜索选中的Tree组件

    1.实现效果 2.实现原理 2.1前端实现搜索过滤 indexOf:indexOf() 方法可返回某个指定的字符串...

  • 关于ES6的find

    在项目中,一些没分页的列表的搜索功能由前端来实现,搜索一般分为精确搜索和模糊搜索。搜索也要叫过滤,一般用filte...

  • python 从字符串格式的模块与方法中,获取相应的模块和方法对

    目的: 从前端获取模块和方法的名称,后台搜索到该方法后,执行,并将结果返回到前端。 实现:目录结构: test.c...

  • 前端js实现本地模糊搜索

    很多时候我们做模糊查询是传关键字给后台请求后台接口,但是有时候一些轻量级的列表前端来做可以减少ajax请求,在一定...

网友评论

      本文标题:前端搜索实现

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