前端本地模糊搜索并高亮

袭人
• 阅读 2491
项目需求是通过搜索关键字显示符合搜索条件的用户,搜索条件是用户昵称和用户唯一号码(是一串数字),其中昵称支持中文匹配和首字母拼音匹配。
首先说说自己的想法:
1.既然要支持拼音搜索那么必须要一个能把中文转化成拼音的东西(我是在网上找的大佬的代码,一般像这种js都是比较大的,。。。没有办法字符太多)
2.搜索内容符合昵称和唯一号需要分开判断
开始:
假如本地数组是arr1 [
    {
        name:"张三",
        id:0001
        ....
    },
    {
        name:"李四",
        id:0002
        ....
    },
    {
        name:"王五",
        id:0003
        ....
    }
    ...
]
1.因为是使用本地搜索(这里是一个数组对象),并且要高亮必然要涉及到修改字段,这里提供一个深克隆数组的方法
    var deepCopy = function(o){
        if (o instanceof Array) {
            var n = [];
            for (var i = 0; i < o.length; ++i) {
                n[i] = deepCopy(o[i]);
            }
            return n;

        } else if (o instanceof Object) {
            var n = {}
            for (var i in o) {
                n[i] = deepCopy(o[i]);
            }
            return n;
        } else {
            return o;
        }
    }
2.需要使用转拼音的js为 arr中每一项添加一个保存对应简拼的字段,我这里叫spelling,我这里全部转为大写,
  此时arr应该是这个样子 [
    {
        name:"张三",
        id:0001,
        spelling:"ZS"
        ....
    },
    {
        name:"李四",
        id:0002,
        spelling:"LS"
        ....
    },
    {
        name:"王五",
        id:0003,
        spelling:"WW"
        ....
    }
    ...
]
3.全局声明一个数组 var arr1 = []用来保存匹配项
4.这里提供一个获取匹配内容开始的位置的方法  只返回第一次匹配上的位置      
    var getStartIndex = function(val,inputStr){
        var result
        var reg1=new RegExp(val,"ig");
        reg1.lastIndex=0;
        if((result = reg1.exec(inputStr)) != null){
            var lIndex=reg1.lastIndex-result[0].length;    
            return lIndex
        }
    }
    例子:在ABCD中匹配 a或者A getStartIndex("a","ABCD")//0;getStartIndex("aB","ABCD")//0;getStartIndex("c","ABCD")//2
5.利用正则匹配输入内容和要比对的字段
    var newArr = deepCopy (arr)//深拷贝本地数组       
    var reg = new RegExp(val.trim().toUpperCase())//val是你输入的内容
    newArr .map(function(item){
         if(item.name.match(reg)||(item.id+"").match(reg)||(item.spelling).match(reg)){
             //这里姓名id简拼任何一项匹配成功就将此项加入到arr1中
             var keyWord = (item.name).replace(/[\s]+/g,' ')//name字段去掉空格
             var keyId = (item.id+"").replace(/[\s]+/g,' ');//id字段去掉空格
             var rex = new RegExp(val.trim(),'i');
             if(item.name.match(reg)){//中文匹配成功的情况直接将输入内容替换成一个span标签包住并给个红色
                 item.name = keyWord.replace(rex,`<span style="color:red">${rex.exec(keyWord)}</span>`)
             }else if((item.spelling+"").match(reg)){//简拼匹配成功时
                 var index = getStartIndex(val.trim(),item.spelling)-1
                 for(let j = 0;j<val.trim().length;j++){
                    index += 1
                    showContent += item.name[index]
                 } 
                 item.name = keyWord.replace(showContent,`<span style="color:red">${showContent}</span>`)
                     
             }else if(item.id +"").match(reg)){
                 item.id = keyId.replace(rex, `<span style="color:red">${content}</span>`)
             }
             arr1.push(item)             
         }
    })
 至于为什么要先判断匹配上用户名在判断匹配id 是因为产品的需求问题,之后拿到arr1就可以渲染页面;
  
6.总结
    我的代码是封装了一个方法的因为我的项目还有其他需求比较麻烦比如按产品规则排序什么还有其他比较多又杂,就不贴出我的代码了,我写这些主要是提供一个思路,我主要是想记录两个方法,一个是深拷贝数组和获取匹配开始的index的方法。还有全拼+简拼匹配什么的 以后有时间来实现吧 单纯想了一下感觉很麻烦,另外转拼音的js 网上找吧! 
点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
4年前
SQL 拼音搜索
【个人收藏】1.将汉字转拼音首字母自定义FunctiondropfunctionF_GET_PINYINCREATEORREPLACEFUNCTIONF_GET_PINYIN(P_NAMEINVARCHAR2)RETURNVARCHAR2ASV_COMPAREVARCHAR2(50);
Stella981 Stella981
4年前
Linux安装搜狗输入法
本系统使用Ubuntu16.04LTS安装中文输入法Ubuntu17.04中支持IBUS,fcitx等输入法框架。分别介绍两种框架下的中文输入法安装:1.IBUS框架下的拼音输入法1.1在UbuntuSoftware搜索“pinyin”,安装列表中第一个;1.2在系统设置LanguageSupport中将“Keyboard
Wesley13 Wesley13
4年前
ES[7.6.x]学习笔记(十二)高亮 和 搜索建议
ES当中大部分的内容都已经学习完了,今天呢算是对前面内容的查漏补缺,把ES中非常实用的功能整理一下,在以后的项目开发中,这些功能肯定是对你的项目加分的,我们来看看吧。高亮高亮在搜索功能中是十分重要的,我们希望搜索的内容在搜索结果中重点突出,让用户聚焦在搜索的内容上。我们看看在ES当中是怎么实现高亮的,我们还用之前的索引ik_index,前面
Stella981 Stella981
4年前
ElasticSearch + Canal 开发千万级的实时搜索系统
公司是做社交相关产品的,社交类产品对搜索功能需求要求就比较高,需要根据用户城市、用户ID昵称等进行搜索。项目原先的搜索接口采用SQL查询的方式实现,数据库表采用了按城市分表的方式。但随着业务的发展,搜索接口调用频次越来越高,搜索接口压力越来越大,搜索数据库经常崩溃,从而导致搜索功能经常不能使用。!(https://oscimg.oschina.n
Stella981 Stella981
4年前
EasyUI combobox下拉列表实现搜索过滤(模糊匹配)和placeholder效果
实现搜索功能:  项目中的某个下拉列表长达200多个项,这么巨大的数量一个一个找眼镜都得看花,于是就得整了个搜索功能。看网上别人帖子有只能前缀匹配的方案,但只能前缀匹配的话用起来也不是很方便。于是就记录一下模糊匹配的方案。实现效果:!(https://oscimg.oschina.net/oscnet/8d1b270fe6
Wesley13 Wesley13
4年前
mysql一些使用函数(不断更新)
1.中文转拼音码,多用于将姓名转成拼音(例如:刘德华:liudehua)/建立拼音码表/CREATETABLEIFNOTEXISTSt_base_pinyin(pin_yin_varchar(255)CHARACTERSETgbkNOTNULL,code_int(11)NO
子桓 子桓
2年前
多功能文件搜索软件 HoudahSpot补丁中文版
HoudahSpot是一款针对Mac系统的高级文件搜索工具。它能够提供强大且灵活的搜索功能,帮助用户快速、准确地找到他们需要的文件。HoudahSpot的主要特点包括:强大的搜索功能:HoudahSpot能够在整个Mac系统中进行全文搜索,并支持各种高级搜
绣鸾 绣鸾
2年前
PDF Search for Mac(pdf文件搜索工具)
是一款Mac平台上的PDF文件搜索工具,可以帮助用户快速地搜索和查找Mac电脑上的PDF文件。该软件提供了快速、准确、可靠的搜索和查找功能,可以让用户轻松地搜索和查找PDF文档中的关键字、短语和其他内容。此外,PDFSearch还提供了一些实用的特性,例如
小万哥 小万哥
2年前
SQL 通配符:用于模糊搜索和匹配的 SQL 关键技巧
SQL通配符字符通配符字符用于替代字符串中的一个或多个字符。通配符字符与LIKE运算符一起使用。LIKE运算符用于在WHERE子句中搜索列中的指定模式。示例返回所有以字母'a'开头的客户:sqlSELECTFROMCustomersWHERECustome
用 AI 解锁技术调研的新姿势
1.前言在日常开发中,为了保证技术方案的质量,一般会在撰写前进行调研。如果先前没有相关领域的知识储备,笔者的调研方式一般是先通过搜索引擎进行关键字查询,然后再基于搜索的结果进行发散。这样调研的结果受关键字抽象程度和搜索引擎排名影响较大,可能会存在偏差导致调
京东云开发者 京东云开发者
8个月前
用 AI 解锁技术调研的新姿势
作者:京东科技谢骁1.前言在日常开发中,为了保证技术方案的质量,一般会在撰写前进行调研。如果先前没有相关领域的知识储备,笔者的调研方式一般是先通过搜索引擎进行关键字查询,然后再基于搜索的结果进行发散。这样调研的结果受关键字抽象程度和搜索引擎排名影响较大,可