首页
学习
活动
专区
圈层
工具
发布

前端-模糊搜索

这是搜索关键字 cfg时,会自动匹配到 config方法 同样,我们再看另一个例子 ?...通过关键字 bi会匹配到好几个结果 这个和一些编辑器的搜索功能很像,比如 sublime text,不需要知道关键字的完整拼写,只需要知道其中的几个字母即可。 那么这个功能在前端我们如何去实现呢?...不考虑性能的话,我们可以用正则简单实现如下: 把关键字拆分,加入 (.?),如 cfg 最终为 (.?)(c)(.?)(f)(.?)(g)(.*?)..., 然后拿这个正则去测试要搜索的列表,把符合要求的选项给拿出来即可 考虑到要高亮结果,我们还要生成对应的替换表达式,最后的函数如下 var escapeRegExp = /[-#$^*()+[]{}|\...到目前为止我们只实现了搜索功能,按更优的体验来讲,在搜索结果中,要优先把相连匹配的放在首位,如 bi关键字,要把 bind结果放到 beginUpdate前面。第二个截图是有优化的地方的。

1.6K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    脱机环境实现支持拼音模糊搜索的AutoCompleteBox

    要实现拼音模糊搜索功能,通常会采用分词、数据库等技术对待匹配数据集进行预处理。...某些场景受制于条件限制,无法对数据进行预处理,本文将介绍在这种情况下如何实现支持拼音模糊搜索的AutoCompleteBox,先来看下实现效果。...拼音模糊匹配汉字则采用字符串匹配的方式来解决,也就是搜索字符串和待匹配数据集的内容全部转换为拼音字符串,然后进行子串匹配。这里有三个问题需要解决。 汉字转换为拼音。 拼音如何匹配。...汉字转换拼音 微软为了开发者实现国际化语言的互转,提供了Microsoft Visual Studio International Pack,这个扩展包里面有中文、日文、韩文、英语等各国语言包,并提供方法实现互转...小结 本文介绍了在不依赖数据库及分词的情况下如何实现拼音模糊搜索并在目标字符串中高亮显示,方法中也存在诸多不足需要完善的地方。 匹配策略存在误匹配。例如输入石,可以匹配出拼音为shi的所有汉字。

    41410

    整合ElasticSearch实现数据模糊搜索(Logstash同步Mysql数据)

    前言 本文介绍了如何整合搜索引擎elasticsearch与springboot,对外提供数据查询接口。...业务介绍 我的个人网站需要对mysql数据库内存储的京东商品进行模糊查询(模仿淘宝商品搜索),所以选择了将数据导入elasticsearch随后使用他来进行关键词查询。...前端只需发送用户搜索的关键词和分页参数(可选),即可返回商品数据(json格式) 开发环境 组件介绍: elasticsearch:搜索引擎,用于存储待搜索数据 logstash:用于将mysql中的商品数据同步到搜索引擎中...-- 搜索引擎:elastic-search--> org.elasticsearch elasticsearch.../** * 根据商品名在pm_jd_item中搜索商品 * @param itemName * @param startRow * @param pageSize

    6.4K31

    HTML5 JS实现毛玻璃效果(高斯模糊)

    HTML5 JS实现毛玻璃效果(高斯模糊) 苹果IOS系统的毛玻璃效果非常绚丽,自己也想在HTML5中实现同样的效果 css3中可以使用blur来实现这种效果: .blur { -webkit-filter...),而且不能局部控制图片 为了解决CSS3的缺陷,我们可以使用HTML5的canvas,用过photoshop的人一定知道里面有个高斯模糊功能,其实我们要做的就是用代码实现图片的高斯模糊转换,canvas...中的getImageData方法获取图片像素信息,然后写相应的算法对图片像素进行转换 对高斯模糊的转换算法感兴趣的可以参考这篇文章—-点击打开链接 如果对这个算法实现不感兴趣,也可以用前人已经实现的JS...这样高斯模糊效果不但非常理想,而且可以局部模糊图片 以下是测试代码: index.html文件 html> HTML5 JS实现毛玻璃效果(高斯模糊) <link rel="stylesheet" type

    7.5K30

    小程序云开发模糊查询,实现数据库多字段的模糊搜索

    最近做小程序云开发时,用到了一个数据库的模糊搜索功能,并且是要求多字段的模糊搜索。 网上也有一大堆资源,但是都是单个字段的搜索。如下图 [format,png] 上图只可以实现time字段的模糊搜索。...但是我们如果相对数据表里的多个字段做模糊查询呢?该怎么办呢。...多字段模糊搜索 一,如我们的数据表里有以下数据,我们想同时模糊查询name和address字段 [format,png] [format,png] 如我们搜索“周杰”可以看到我们查询到下面两条数据。...[format,png] 二,如我们搜索“编程”,可以搜索到下面数据 [format,png] 可以看到我们搜索到的两条数据,一个是name字段为 编程小石头, 一个是address字段里包含“编程“...console.log(res) }, fail: err => { console.log(err) } }) key就是我们要搜索的关键字

    5.1K32

    整合ElasticSearch实现数据模糊搜索(Logstash同步Mysql数据)

    实战系列 前言 本文介绍了如何整合搜索引擎elasticsearch与springboot,对外提供数据查询接口。...业务介绍 我的个人网站需要对mysql数据库内存储的京东商品进行模糊查询(模仿淘宝商品搜索),所以选择了将数据导入elasticsearch随后使用他来进行关键词查询。...前端只需发送用户搜索的关键词和分页参数(可选),即可返回商品数据(json格式) 开发环境 组件介绍: elasticsearch:搜索引擎,用于存储待搜索数据 logstash:用于将mysql中的商品数据同步到搜索引擎中...-- 搜索引擎:elastic-search--> org.elasticsearch elasticsearch.../** * 根据商品名在pm_jd_item中搜索商品 * @param itemName * @param startRow * @param pageSize

    1.4K30

    MySQL模糊搜索的几种姿势

    导读:本文对MySQL中几种常用的模糊搜索方式进行了介绍,包括LIKE通配符、RegExp正则匹配、内置字符串函数以及全文索引,最后给出了性能对比。 ?...对于简单的判断模式串是否存在类型的模糊搜索,应用MySQL内置函数即可实现,例如Instr()、Locate()、Position()等。...本文不过多展开正则表达式相关介绍,仅在Like的基础上,简单介绍其与Like模糊搜索方式的区别。...words REGEXP '^hello'; 内置函数 对于包含某些特定模式串的模糊搜索,可以通过MySQL内置函数实现。...03 查询性能对比 为了对比以上4种模糊搜索方式的性能,我们这里构建一个规模较大且更具一般性的数据表。本文选择采集若干条英文格言,用于创建目标数据库。 创建数据表。

    3.8K20

    搜索如何倒排索引?如何模糊匹配?

    那么倒排索引存储的数据将会变成: titletagterm文档idterm文档id这1,2123451是1,2543212一张1 一幅2 很1 相当2 贵1,2 名画1,2 画1,2 二、搜索如何进行模糊匹配...搜索引擎使用倒排索引来进行模糊匹配,以上文为例,输入"很贵的画”搜索时: 首先输入词也进行分词"很/贵/画",然后用得到的term去和索引数据进行比对,得到:"很"->{1},“贵”->{1,2},"...画"->{1,2},然后"很"∩"贵"∩"画"={1},得到文档1为结果,模糊匹配在索引内部都是通过分词后的term精确匹配来计算的 2.1 关于匹配度 es的match查询通常可以带匹配度(默认是75%...),依旧输入"很贵的画",如果匹配度是100%,那么结果就是"很"∩"贵"∩"画"={1},如果匹配度降到75%(搜索词越短,75%的范围越模糊),那么结果(按正常理解)可以是("很"∩"贵)υ("贵"...∩"画")υ("很"∩"画")={1,2} 2.2 关于短的搜索词 上面说到短的搜索词75%的匹配度很模糊,因为貌似es有个匹配度自动降级,短词搜索的时候匹配度会自动降到最低,只要有一个term匹配就可以当作结果

    2K40
    领券