前端 模糊 搜索 经验总结

最新推荐文章于 2025-10-04 16:16:16 发布
原创 最新推荐文章于 2025-10-04 16:16:16 发布 · 588 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文总结了前端交易搜索的三种方法：精确搜索、damerau-levenshtein距离算法搜索和pinyin-match模块搜索。精确搜索简单但不支持拼音和模糊搜索；damerau-levenshtein算法支持模糊和拼音但准确性不足；pinyin-match模块则提供了高精确度的拼音和模糊搜索功能。

前端交易搜索总结

1. 精确搜索

优点简单快捷 一行js 代码搞定
缺点不支持 拼音搜索 模糊搜索

let res  = [{
   
   name:'123'},{
   
   name:'我的名字1'}].filter(array => array.name.match('我'));

2. 使用 damerau-levenshtein 模块 距离算法搜索

需要先安装 npm 模块 damerau-levenshtein
优点
支持模拟搜索
支持拼音搜索
缺点
搜索不准确 （致命伤）
基本用法


                

                
                
        

    


  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
拼音搜索 拼音首字母搜索 (pinyin-match) js

				
			

			

				

					仙途路漫漫其修远兮
				

				

					04-06
					
					2402
					
				

			

		

		

			
				
给搜索 input 框加上拼音首字母筛选和拼音筛选；支持多字段传入；

			
		

	



                

            
              



	

		

			

				
					
总结MySQL模糊查询

				
			

			

				

					bravery__的博客
				

				

					07-08
					
					954
					
				

			

		

		

			
				
一、语法
select 字段集 from 表名 where 字段名 like 条件

二、实例
建表：
create table student(
	id char(36) primary key,
	name varchar(8) not null,
	age int(3) default 0,
	mobile char(11),
	address varchar(150)
)
insert into student 
values ('9b4435ec-372c-456a-b287-e3c5aa23df

			
		

	



              


  
  
              

                


	

		

			

				
					
html模糊透明,tips前端背景与元素的透明和模糊_html/css_WEB-ITnose

				
			

			

				

					weixin_35708609的博客
				

				

					06-09
					
					276
					
				

			

		

		

			
				
碰到好几次这样的情况了:一个带点儿文艺效果 背景图片模糊 而一行别致的文字清晰的悬浮在背景上(口胡,加点美好的想象,生活会更美好)第一反应是 this is easy. cause i know css have attribute like(blur,opacity)好像很容易,顶多再加点儿1 -moz-opacity:0.5;2 filter:alpha(opacity=50); /* 针对 ...

			
		

	





	

		

			

				
					
JS递归过滤树形结构数组对象--模糊查询

				
			

			

				

					我是段段的博客
				

				

					02-09
					
					4719
					
				

			

		

		

			
				
文章目录前言方式一方式二方式三
前言
  2022年第一篇文章，祝大家新年快乐呀~
  在工作中为了优化项目性能，决定由前端来实现简单树形数据的搜索功能，有一个功能需求是这样
的，简单描述下需求内容

1、父节点含有，将父节点返回（包含所有子节点）
2、父节点没有，但子节点含有，父节点仍要返回，而子节点只返回包含的搜索内容的

自己也写了算法来实现，可是总有点问题，于是就上网查了，果然有好多方法，但是有些方法是具有局限性的，因
为不能确定树形结构的层级是多深的，所以还是边查边修改，调试了好长时间，最终找到了

			
		

	



		

			
		



	

		

			

				
					
js中数组的filter方法无法返回0的问题

				
			

			

				

					m0_55905001的博客
				

				

					05-05
					
					1628
					
				

			

		

		

			
				
js中数组的filter方法无法返回0的问题问题解决方法
问题

现在有一个要求，编写一个函数，传入一个集合（里面都是数字），返回集合中3d倍数的元素
例子：传入：[0, 1, 2, 3, 4, 5, 6, 9, 11]，返回：[0, 3, 6, 9]

解决方法
现在看看如下两种方法：
function choose_multiples_of_three(collection) {
  return collection.filter(item => {
    if (item % 3 == 0)

			
		

	





	

		

			

				
					
VUE前端实现“模糊搜索“（纯前端）

					
热门推荐

				
			

			

				

					weixin_45928161的博客
				

				

					05-19
					
					1万+
					
				

			

		

		

			
				
vue纯前端实现“模糊搜索”、“按匹配度排序”

			
		

	





	

		

			

				
					
Web前端技术实训总结与经验分享

				
			

			

				

					
				

			

		

		

			
				
综上所述，“web前端技术实训总结”这份文档应是学员在系统学习Web前端开发技术后，对所学知识、项目实践、经验教训、技术感悟等方面的系统性回顾与归纳。它不仅反映了学员的技术成长轨迹，也为后续的学习和职业发展...

			
		

	





	

		

			

				
					
1、解锁创新密码：模糊前端的制胜之道

				
			

			

				

					soda5的博客
				

				

					10-03
					
					21
					
				

			

		

		

			
				
本文探讨了创新过程中至关重要的‘模糊前端’阶段，分析了其对企业竞争优势的关键影响。文章指出，尽管模糊前端充满不确定性，但它是决定创新成败的核心环节。通过案例揭示忽视该阶段的严重后果，并提出加强理解、优化资源、培养关键能力、整合客户需求及跨行业创新等策略，帮助企业将模糊转化为清晰，提升创新效率与成功率。

			
		

	





	

		

			

				
					
2、创新模糊前端的管理艺术与实践

					
最新发布

				
			

			

				

					soda5的博客
				

				

					10-04
					
					38
					
				

			

		

		

			
				
本文深入探讨了创新模糊前端的管理艺术与实践，分析了其在企业创新过程中的关键作用。内容涵盖创新前端的重要性、行动阶段划分、管理的艺术与挑战，并介绍了战略、人员、知识产权及跨行业网络等方面的应对策略。文章还系统总结了多种管理工具与方法，如情景规划、身体风暴、共情设计、敏捷方法等，并通过宝马、Local Motors和ABB等案例展示了实际应用。最后展望了数字化转型、开放式创新、可持续创新和人工智能辅助创新等未来趋势，为企业提升前端创新能力提供了全面指导。

			
		

	





	

		

			

				
					
前端面试题，背会可就业，适合1-3年前端

				
			

			

				

					01-15
				

			

		

		

			
				
根据给定文件的信息，我们可以总结出以下几点关于前端开发的重要知识点：  ### 1. CSS 盒子模型  #### 标准盒模型 - **Content**: 内容区域。 - **Border**: 边框。 - **Padding**: 内边距。 - **Margin**: 外边距。...

			
		

	





	

		

			

				
					
vue姓名筛选模糊搜索

				
			

			

				

					努力变好
				

				

					10-30
					
					1668
					
				

			

		

		

			
				
1、名字筛选功能主要运用了计算属性关键词:computed

2、效果图



输入“六”关键字显示名字带“六”的所有名字



3、代码（vue.js记得修改目录）

用到的数据：


list: [
					{name: '张三', sex: '女', age: 19, phone: '18921212121'},
					{name: '李四', sex: '男', age: 29, phone: '18921221121'},
					{name: '王五', sex: '女', age: .

			
		

	





	

		

			

				
					
damerau-levenshtein:使用Damerau-Levenshtein距离获取文本相似度

				
			

			

				

					05-28
				

			

		

		

			
				
达默劳·莱文施泰因（Damerau Levenshtein）
 获取与Damerau-Levenshtein距离的文本相似度。
要求
PHP 7.1.0或更高版本。
安装
composer require oefenweb/damerau-levenshtein 
用法
 $ pattern = 'foo bar' ;
$ string  = 'fuu baz' ;
$ damerauLevenshtein = new DamerauLevenshtein ( $ pattern , $ string );
$ damerauLevenshtein -> getSimilarity (); // absolute edit distance; == 3
$ damerauLevenshtein -> getRelativeDistance (); // relative edit dist

			
		

	





	

		

			

				
					
damerau-levenshtein:使用Damerau-Levenshtein算法计算编辑距离

				
			

			

				

					05-23
				

			

		

		

			
				
达默劳-莱文施泰因
 damerau-levenshtein宝石允许查找效率为O（N * M）的两个UTF-8或ASCII编码的字符串之间的。
 该gem实现了纯Levenshtein算法，即Damerau的改进算法（其中2个字符换位算作1个编辑距离）。 它还包括Boermer＆Rees 2008对Damerau算法的修改，其中也考虑了大于1个字符块的转置 。 
 require "damerau-levenshtein"
DamerauLevenshtein . distance ( "Something" , "Smoething" ) #returns 1
 根据Levenshtein alrorithm，它还会返回两个字符串之间的差异。 差异由标签<ins> ， <del>和<subst> 。 这样的标签使得可以灵活地突出显示字符串之间的差异。 
 require "damerau

			
		

	





	

		

			

				
					
vue input模糊查询（模糊搜索）功能

				
			

			

				

					mxp12345的博客
				

				

					03-28
					
					8267
					
				

			

		

		

			
				
vue input模糊查询（模糊搜索）功能

			
		

	





	

		

			

				
					
前端 js实现模糊搜索

				
			

			

				

					q4717529的博客
				

				

					02-16
					
					6744
					
				

			

		

		

			
				
前端  js实现模糊搜索

			
		

	





	

		

			

				
					
Levenshtein的安装和测试

				
			

			

				

					woho778899的博客
				

				

					08-04
					
					1957
					
				

			

		

		

			
				
前言：想安装个英语单词比较的工具，将字母排列相似的单词放在一起。

先试了PYTHON自带的difflib,结果不是太理想，设置大于等于80%的相似度：ratio=difflib.SequenceMatcher(None, new_word, sheet1.cell(i,2).value).quick_ratio()
      if ratio>=0.8:
        findwords+='相似：'+sheet1.cell(i,2).value+'\t\n'

结...

			
		

	





	

		

			

				
					
前端拼音（汉字）检索，好用的插件 pinyin-match

				
			

			

				

					IT_dabai的博客
				

				

					08-12
					
					2675
					
				

			

		

		

			
				
好用的前端拼音检索插件（汉字也可检索），无需请求后端接口，只需针对当前已获取的数据源进行操作，对符合条件的数据进行返回显示，即可完成拼音检索

			
		

	





	

		

			

				
					
基于react antd实现左侧菜单快捷搜索直接跳转指定页面

				
			

			

				

					hyupeng1006的博客
				

				

					04-27
					
					1876
					
				

			

		

		

			
				
展示效果：





代码实现：


import React, { PureComponent, Suspense } from 'react';
import router from 'umi/router';
import { Layout, Select } from 'antd';
import PinYinMatch from 'pinyin-match';

const { Sider } = Layout;
const { Option } = Select;

export defaul.

			
		

	





	

		

			

				
					
阿里的protable组件的实用汇总!

				
			

			

				

					H5CaiNiao的博客
				

				

					09-06
					
					3588
					
				

			

		

		

			
				
renderFormItem :   (item,{ type, defaultRender, formItemProps, fieldProps, ...rest },form) => ReactNode     看的出来这个形式最后返回的是节点或者是组件,这个可以支持自定义搜索表头,包括所有antd的所有组件,可以根据不同需求定制。formRef可以用react的 useRef来赋值,就可以获取到表格实例,可以在任何地方调用高级表格的api,注意:api的名字不太一样,可以打印看看。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			
			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值