当前位置：移动技术网 > 移动技术>移动开发>IOS > ios实现搜索关键字高亮效果

ios实现搜索关键字高亮效果

2019年07月24日 | 移动技术网移动技术 | 我要评论

一. 需求要求实现的效果

汉字支持汉字直接搜索、拼音全拼搜索、拼音简拼搜索

搜索匹配到的关键字高亮显示

搜索结果优先显示全部匹配、其次是拼音全拼匹配、拼音简拼匹配；关键字在结果字符串中位置越靠前，优先显示

支持搜索英文、汉字、电话号码及混合搜索

二. 需求分析

英文名称及电话号码的搜索直接使用完全匹配的方式即可

重难点是汉字的拼音相关的拼音全拼、简拼搜索，比如 “刘亦菲” 对应的搜索关键字有且只有以下三大类总计 25 种匹配汉字：“刘”、“亦”、“菲”、“刘亦”、“亦菲”、“刘亦菲”

简拼相关："l"、"y"、"f"、"ly"、"yf"、"lyf"

全拼相关："li"、"liu"、"liuy"、"liuyi"、"liuyif"、"liuyife"、"liuyifei"、"yi"、"yif"、"yife"、"yifei"、"fe"、"fei"

拼音的重难点还包括：比如搜索关键字为“xian”，既要匹配出“先”，也要匹配出“西安”

三. 代码设计

1. 整体流程

首先初始化原始的数据（包含汉语、英文、数字及随意组合），主要是将一个汉语字符串转化为汉语全拼拼音及每个拼音字母所对应汉字的位置和汉语简拼拼音和每个拼音字母对应汉字的位置，将初始化之后的信息缓存起来

+ (instancetype)personwithname:(nsstring *)name hanyupinyinoutputformat:(hanyupinyinoutputformat *)pinyinformat {
 wpfperson *person = [[wpfperson alloc] init];
 
 /** 将汉字转化为拼音的类方法
  * name : 需要转换的汉字
  * pinyinformat : 拼音的格式化器
  * @"" : seperator 分隔符
  */
 nsstring *completespelling = [pinyinhelper tohanyupinyinstringwithnsstring:name withhanyupinyinoutputformat:pinyinformat withnsstring:@""];
 
 // 首字母所组成的字符串
 nsstring *initialstring = @"";
 // 全拼拼音数组
 nsmutablearray *completespellingarray = [[nsmutablearray alloc] init];
 // 拼音首字母的位置数组
 nsmutablearray *pinyinfirstletterlocationarray = [[nsmutablearray alloc] init];
 
 // 遍历每一个字符
 for (nsinteger x =0; x
根据 uisearchresultsupdating 代理方法 - (void)updatesearchresultsforsearchcontroller:(uisearchcontroller *)searchcontroller 来实时获取输入的最新关键字，并遍历数据源，将匹配到的结果显示出来
// 更新搜索结果
- (void)updatesearchresultsforsearchcontroller:(uisearchcontroller *)searchcontroller {
 nslog(@"%@", searchcontroller.searchbar.text);
 
 [self.searchresultvc.resultdatasource removeallobjects];
 
 for (wpfperson *person in self.datasource) {
  wpfsearchresultmodel *resultmodel = [wpfpinyintools
            searcheffectiveresultwithsearchstring:searchcontroller.searchbar.text.lowercasestring
            namestring:person.name
            completespelling:person.completespelling
            initialstring:person.initialstring
            pinyinlocationstring:person.pinyinlocationstring
            initiallocationstring:person.initiallocationstring];
  
  if (resultmodel.highlightrang.length) {
   person.highlightloaction = resultmodel.highlightrang.location;
   person.textrange = resultmodel.highlightrang;
   person.matchtype = resultmodel.matchtype;
   [self.searchresultvc.resultdatasource addobject:person];
  }
 };
 // 将匹配结果按照产品规则进行排序
 [self.searchresultvc.resultdatasource sortusingdescriptors:[wpfpinyintools sortingrules]];
 // 刷新tableview
 dispatch_async(dispatch_get_main_queue(), ^{
  [self.searchresultvc.tableview reloaddata];
 });
}

匹配的过程是一个重难点，分别进行汉字直接匹配、拼音全拼匹配、拼音简拼匹配

+ (wpfsearchresultmodel *)searcheffectiveresultwithsearchstring:(nsstring *)searchstrlower
              namestring:(nsstring *)namestrlower
            completespelling:(nsstring *)completespelling
             initialstring:(nsstring *)initialstring
           pinyinlocationstring:(nsstring *)pinyinlocationstring
           initiallocationstring:(nsstring *)initiallocationstring {
 
 wpfsearchresultmodel *searchmodel = [[wpfsearchresultmodel alloc] init];
 
 nsarray *completespellingarray = [pinyinlocationstring componentsseparatedbystring:@","];
 nsarray *pinyinfirstletterlocationarray = [initiallocationstring componentsseparatedbystring:@","];
 
 // 完全中文匹配范围
 nsrange chineserange = [namestrlower rangeofstring:searchstrlower];
 // 拼音全拼匹配范围
 nsrange complaterange = [completespelling rangeofstring:searchstrlower];
 // 拼音首字母匹配范围
 nsrange initialrange = [initialstring rangeofstring:searchstrlower];
 
 // 汉字直接匹配
 if (chineserange.length!=0) {
  searchmodel.highlightedrange = chineserange;
  searchmodel.matchtype = matchtypechinese;
  return searchmodel;
 }
 
 nsrange highlightedrange = nsmakerange(0, 0);
 
 // mark: 拼音全拼匹配
 if (complaterange.length != 0) {
  if (complaterange.location == 0) {
   // 拼音首字母匹配从0开始，即搜索的关键字与该数据源第一个汉字匹配到，所以高亮范围从0开始
   highlightedrange = nsmakerange(0, [completespellingarray[complaterange.length-1] integervalue] +1);
   
  } else {
   /** 如果该拼音字符是一个汉字的首个字符，如搜索“g”，
    * 就要匹配出“gai”、“ge”等“g”开头的拼音对应的字符，
    * 而不应该匹配到“wang”、“feng”等非”g“开头的拼音对应的字符
    */
   nsinteger currentlocation = [completespellingarray[complaterange.location] integervalue];
   nsinteger lastlocation = [completespellingarray[complaterange.location-1] integervalue];
   if (currentlocation != lastlocation) {
    // 高亮范围从匹配到的第一个关键字开始
    highlightedrange = nsmakerange(currentlocation, [completespellingarray[complaterange.length+complaterange.location -1] integervalue] - currentlocation +1);
   }
  }
  searchmodel.highlightedrange = highlightedrange;
  searchmodel.matchtype = matchtypecomplate;
  if (highlightedrange.length!=0) {
   return searchmodel;
  }
 } 
 // mark: 拼音首字母匹配
 if (initialrange.length!=0) {
  nsinteger currentlocation = [pinyinfirstletterlocationarray[initialrange.location] integervalue];
  nsinteger highlightedlength;
  if (initialrange.location ==0) {
   highlightedlength = [pinyinfirstletterlocationarray[initialrange.length-1] integervalue]-currentlocation +1;
   // 拼音首字母匹配从0开始，即搜索的关键字与该数据源第一个汉字匹配到，所以高亮范围从0开始
   highlightedrange = nsmakerange(0, highlightedlength);
  } else {
   highlightedlength = [pinyinfirstletterlocationarray[initialrange.length+initialrange.location-1] integervalue]-currentlocation +1;
   // 高亮范围从匹配到的第一个关键字开始
   highlightedrange = nsmakerange(currentlocation, highlightedlength);
  }
  searchmodel.highlightedrange = highlightedrange;
  searchmodel.matchtype = matchtypeinitial;
  if (highlightedrange.length!=0) {
   return searchmodel;
  }
 }
 searchmodel.highlightedrange = nsmakerange(0, 0);
 searchmodel.matchtype = nsintegermax;
 return searchmodel;
}

2. 第三方依赖

首先筛选出一个比较全的第三方库 pinyin4objc用于汉语转拼音，拼音的 unicode 库比较全，一些新的汉字也都能转成拼音
但是由于该库好久没有更新，获取拼音文件部分代码不适合组件化的直接开发，因此我直接合到源文件里面了
汉语转拼音的格式

// 获取格式化器
+ (hanyupinyinoutputformat *)getoutputformat {
 hanyupinyinoutputformat *pinyinformat = [[hanyupinyinoutputformat alloc] init];
 /** 设置大小写
  * casetypelowercase : 小写
  * casetypeuppercase : 大写
  */
 [pinyinformat setcasetype:casetypelowercase];
 /** 声调格式 ：如 王鹏飞
  * tonetypewithtonenumber : 用数字表示声调 wang2 peng2 fei1
  * tonetypewithouttone : 无声调表示 wang peng fei
  * tonetypewithtonemark : 用字符表示声调 wáng péng fēi
  */
 [pinyinformat settonetype:tonetypewithouttone];
 /** 设置特殊拼音ü的显示格式：
  * vchartypewithuandcolon : 以u和一个冒号表示该拼音，例如：lu:
  * vchartypewithv   : 以v表示该字符，例如：lv
  * vchartypewithuunicode : 以ü表示
  */
 [pinyinformat setvchartype:vchartypewithv];
 return pinyinformat;
}

3. 其他细节

排序规则

+ (nsarray *)sortingrules {
 // 按照 matchtype 顺序排列，即优先展示 中文，其次是全拼匹配，最后是拼音首字母匹配
 nssortdescriptor *destype = [nssortdescriptor sortdescriptorwithkey:@"matchtype" ascending:yes];
 // 优先显示 高亮位置索引靠前的搜索结果
 nssortdescriptor *deslocation = [nssortdescriptor sortdescriptorwithkey:@"highlightloaction" ascending:yes];
 return @[destype,deslocation];
}

四. 循环方法测试及优化选择过程

在优化遍历方法的过程中，测试了几种遍历方法，这里以输入关键字“wang”为测试数据，测试真机机型为iphone se 10.3

常规 for 循环

/**
 2017-12-06 12:02:51.943006 highlightedsearch[4459:1871193] w
 2017-12-06 12:02:51.943431 highlightedsearch[4459:1871193] 开始匹配，开始时间：2017-12-06 04:02:51 +0000
 2017-12-06 12:02:51.980588 highlightedsearch[4459:1871193] 匹配结束，结束时间：2017-12-06 04:02:51 +0000，耗时：0.0372
 2017-12-06 12:02:52.284488 highlightedsearch[4459:1871193] wa
 2017-12-06 12:02:52.284771 highlightedsearch[4459:1871193] 开始匹配，开始时间：2017-12-06 04:02:52 +0000
 2017-12-06 12:02:52.316536 highlightedsearch[4459:1871193] 匹配结束，结束时间：2017-12-06 04:02:52 +0000，耗时：0.0318
 2017-12-06 12:02:52.516826 highlightedsearch[4459:1871193] wan
 2017-12-06 12:02:52.517121 highlightedsearch[4459:1871193] 开始匹配，开始时间：2017-12-06 04:02:52 +0000
 2017-12-06 12:02:52.545542 highlightedsearch[4459:1871193] 匹配结束，结束时间：2017-12-06 04:02:52 +0000，耗时：0.0285
 2017-12-06 12:02:52.838220 highlightedsearch[4459:1871193] wang
 2017-12-06 12:02:52.838602 highlightedsearch[4459:1871193] 开始匹配，开始时间：2017-12-06 04:02:52 +0000
 2017-12-06 12:02:52.880200 highlightedsearch[4459:1871193] 匹配结束，结束时间：2017-12-06 04:02:52 +0000，耗时：0.0417
 */
for (nsinteger i = 0; i < self.datasource.count; i++) {

gcd 多线程循环

/**
 2017-12-06 11:56:55.565738 highlightedsearch[4419:1869486] w
 2017-12-06 11:56:55.566287 highlightedsearch[4419:1869486] 开始匹配，开始时间：2017-12-06 03:56:55 +0000
 2017-12-06 11:56:55.626184 highlightedsearch[4419:1869486] 匹配结束，结束时间：2017-12-06 03:56:55 +0000，耗时：0.0601
 2017-12-06 11:56:55.937535 highlightedsearch[4419:1869486] wa
 2017-12-06 11:56:55.937842 highlightedsearch[4419:1869486] 开始匹配，开始时间：2017-12-06 03:56:55 +0000
 2017-12-06 11:56:55.983074 highlightedsearch[4419:1869486] 匹配结束，结束时间：2017-12-06 03:56:55 +0000，耗时：0.0452
 2017-12-06 11:56:56.344808 highlightedsearch[4419:1869486] wan
 2017-12-06 11:56:56.347350 highlightedsearch[4419:1869486] 开始匹配，开始时间：2017-12-06 03:56:56 +0000
 2017-12-06 11:56:56.414215 highlightedsearch[4419:1869486] 匹配结束，结束时间：2017-12-06 03:56:56 +0000，耗时：0.0690
 2017-12-06 11:56:56.711174 highlightedsearch[4419:1869486] wang
 2017-12-06 11:56:56.712013 highlightedsearch[4419:1869486] 开始匹配，开始时间：2017-12-06 03:56:56 +0000
 2017-12-06 11:56:56.774761 highlightedsearch[4419:1869486] 匹配结束，结束时间：2017-12-06 03:56:56 +0000，耗时：0.0632
 */
dispatch_queue_t queue = dispatch_get_global_queue(dispatch_queue_priority_default, 0);
dispatch_apply(self.datasource.count, queue, ^(size_t index) {

enumerateobjectswithoptions 多线程循环

/**
 2017-12-06 11:58:12.716606 highlightedsearch[4428:1869917] w
 2017-12-06 11:58:12.717005 highlightedsearch[4428:1869917] 开始匹配，开始时间：2017-12-06 03:58:12 +0000
 2017-12-06 11:58:12.780168 highlightedsearch[4428:1869917] 匹配结束，结束时间：2017-12-06 03:58:12 +0000，耗时：0.0633
 2017-12-06 11:58:13.058590 highlightedsearch[4428:1869917] wa
 2017-12-06 11:58:13.058841 highlightedsearch[4428:1869917] 开始匹配，开始时间：2017-12-06 03:58:13 +0000
 2017-12-06 11:58:13.116964 highlightedsearch[4428:1869917] 匹配结束，结束时间：2017-12-06 03:58:13 +0000，耗时：0.0581
 2017-12-06 11:58:13.397052 highlightedsearch[4428:1869917] wan
 2017-12-06 11:58:13.397338 highlightedsearch[4428:1869917] 开始匹配，开始时间：2017-12-06 03:58:13 +0000
 2017-12-06 11:58:13.460298 highlightedsearch[4428:1869917] 匹配结束，结束时间：2017-12-06 03:58:13 +0000，耗时：0.0630
 2017-12-06 11:58:13.763888 highlightedsearch[4428:1869917] wang
 2017-12-06 11:58:13.764263 highlightedsearch[4428:1869917] 开始匹配，开始时间：2017-12-06 03:58:13 +0000
 2017-12-06 11:58:13.833888 highlightedsearch[4428:1869917] 匹配结束，结束时间：2017-12-06 03:58:13 +0000，耗时：0.0697
 */
dispatch_queue_t queue = dispatch_queue_create("wpf.updatesearchresults.test", dispatch_queue_serial);
[self.datasource enumerateobjectswithoptions:nsenumerationconcurrent usingblock:^(id _nonnull obj, nsuinteger idx, bool * _nonnull stop) {

forin 循环

/**
 2017-12-06 12:00:38.217187 highlightedsearch[4439:1870645] w
 2017-12-06 12:00:38.217575 highlightedsearch[4439:1870645] 开始匹配，开始时间：2017-12-06 04:00:38 +0000
 2017-12-06 12:00:38.253997 highlightedsearch[4439:1870645] 匹配结束，结束时间：2017-12-06 04:00:38 +0000，耗时：0.0364
 2017-12-06 12:00:38.616430 highlightedsearch[4439:1870645] wa
 2017-12-06 12:00:38.616807 highlightedsearch[4439:1870645] 开始匹配，开始时间：2017-12-06 04:00:38 +0000
 2017-12-06 12:00:38.654969 highlightedsearch[4439:1870645] 匹配结束，结束时间：2017-12-06 04:00:38 +0000，耗时：0.0383
 2017-12-06 12:00:38.948700 highlightedsearch[4439:1870645] wan
 2017-12-06 12:00:38.949453 highlightedsearch[4439:1870645] 开始匹配，开始时间：2017-12-06 04:00:38 +0000
 2017-12-06 12:00:38.986892 highlightedsearch[4439:1870645] 匹配结束，结束时间：2017-12-06 04:00:38 +0000，耗时：0.0378
 2017-12-06 12:00:39.280979 highlightedsearch[4439:1870645] wang
 2017-12-06 12:00:39.281563 highlightedsearch[4439:1870645] 开始匹配，开始时间：2017-12-06 04:00:39 +0000
 2017-12-06 12:00:39.317743 highlightedsearch[4439:1870645] 匹配结束，结束时间：2017-12-06 04:00:39 +0000，耗时：0.0365
 */
for (wpfperson *person in self.datasource) {

最终选择的是forin循环，因为一般情况下 enumerateobjectswithoptions 多线程是最快的，并且稍快于 dispatch_apply 方法，但是因为这个方法需要操作数组，因此必须将操作数据的那行代码加锁或者在指定线程进行，进行这个操作后效率反而不如其他单线程循环，考虑到搜索结果本来还要再次根据规则排序，就选择了 forin 循环

五. 为什么没有选择hash

首先最重要的一条是当前循环的方式也能满足需求（线上大概四千多条数据，使用过程中基本实时展现）

上文在需求分析中已举例，一个三个字的汉字对应的key值就有20多个甚至更多，在解析过程中是十分耗时的，但需求往往还存在类似微信的“群名称”匹配，每多一个字，对应的key值就多几个数量级

maptable在高并发情况下，需要不断进行resize（扩容 & rehash），并且在rehash 并发的情况下还可能形成链表环有个优化的思路，考虑到遍历的方式解析快，搜索匹配慢；hash的方式解析慢，搜索匹配快

通过遍历的方式先快速解析数据，此时搜索使用遍历的方式

然后再用hash的方式再次解析数据（考虑到hash表的扩容会使得瞬时效率的降低，为了避免频繁的扩容，先使用桶排序的方法将10个数字、26个英文字母、以及特殊符号开头的key分别放在37个字典里面，整体是一个数组。每个字典里面存放对应key和value），解析完成之后做个标记就采用hash的方式直接使用输入的key值去查询

配合db缓存，效果应该是很棒的

六. 多音字

简单测了一下拥有该功能的产品：

微信搜索（就是文中讲的该类型搜索）是在本地做的，不支持多音字

钉钉的搜索是服务器做的，支持多音字（但是简单测了一下一些基本的多音字存在bug）

七. 实际项目还要做哪些工作？

正常情况下不会将所有的匹配结果在第一时间全部显示，一般产品需求显示三五个即可，因此可以匹配出若干个结果后停止循环，点击更多再匹配剩余数据源

配合db和hashtable，每次只解析新增的数据源，解析一次后就缓存起来

八. 使用方法

1. 事例工程

git clone git@github.com:pengfeiwang666/highlightedsearch.git
cd example
open highlightedsearch.xcworkspace

2. install

pod "highlightedsearch"

3. usage

// wpfpinyindatamanager 依次添加数据源（标识符为了防止重名现象）
+ (void)addinitializestring:(nsstring *)string identifer:(nsstring *)identifier
// 更新搜索结果
- (void)updatesearchresultsforsearchcontroller:(uisearchcontroller *)searchcontroller {
 ...
 ...
 for (wpfperson *person in [wpfpinyindatamanager getinitializeddatasource]) {
  wpfsearchresultmodel *resultmodel = [wpfpinyintools searcheffectiveresultwithsearchstring:keyword person:person];
  if (resultmodel.highlightedrange.length) {
   person.highlightloaction = resultmodel.highlightedrange.location;
   person.textrange = resultmodel.highlightedrange;
   person.matchtype = resultmodel.matchtype;
    [resultdatasource addobject:person];
  }
}

最后附上源码：https://github.com/pengfeiwang666/highlightedsearch

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

ios输入框单击无光标问题，光标太大问题

react项目苹果手机微信内置浏览器双击输入框才有光标，且光标太大光标的大小主要是由于line-height属性... [阅读全文]
POJ 3281 Dining （网络流/最大流建图拆点 EK+dinic解法）

Dining 题目大意：奶牛要吃食物和饮料，给n种食物，m种饮料，问最多能喂多少奶牛（每种食物和饮料只能使用一次... [阅读全文]
IOS UIViewController和UIView的实用汇总

文章目录ios 移除特定的子视图或移除所有子视图如果要移除一个 UIView 的所有子视图如果要移动指定类型的视... [阅读全文]
Classy Numbers （数位dp模板题）

Classy Numbers 题目大意：给你l,r,让你找在这个闭区间内每位数字为0不超过3的个数，1<=... [阅读全文]
解决H5页面在iOS系统中滑动回弹效果(橡皮筋效果)导致的穿透问题

移动端开发时，H5长页面在iOS系统中滑动时，当页面滑动到顶部或底部时，页面还能够上滑或下滑，手指离开屏幕后回弹... [阅读全文]
webpack-dev-server删除dist目录，图片不显示

不是问题的问题哇擦本质参考感谢点赞哇擦配置 webpack-dev-server 不就是为了提高开发效率（懒），... [阅读全文]
iOS开发 AES+Base64

```objectivecsize_t const kKeySize = kCCKeySizeAES128;NS... [阅读全文]
多次点击LinearLayout或RelativeLayout布局后才得到响应

1 [阅读全文]
Codeforces486 D. Valid Sets（树形dp，去重技巧）

题意：给定n个点的树，每个点有点权a(i)，给定整数D，定义合法连通块为：连通块中最大点权-连通块中最小点权&l... [阅读全文]
TGM诚招客户端及后台开发工程师或实习生（上海）

TGM诚招客户端及后台开发工程师或实习生（上海）岗位职责：客户端开发：主要负责学龄前儿童的教育类app移动端的框... [阅读全文]

网友评论


验证码：