如何实现IOS_SearchBar搜索栏及关键字高亮

搜索框的效果演示:

这个就是所谓的搜索框了,那么接下来我们看看如何使用代码来实现这个功能.

我所使用的数据是英雄联盟的英雄名单,是一个JSON数据的txt文件, JSON数据的处理代码如下所示:

//获取文件的路径path
NSString *path = [[NSBundle mainBundle] pathForResource:@"heros" ofType:@"txt"];
//将路径下的文件转换成NSData数据
NSData *data = [NSData dataWithContentsOfFile:path];
//将得到的NSdata数据进行JSON解析并返回一个结果数组result
id result = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];

我们再来看数据的层级关系:

这里解释下,这个层级关系是通过在线代码格式化网页得到的,我们上一步所做的数据处理就是将原始数据进行处理,得到一个结果数组,他的层级关系和格式化后一样,这样就可以根据格式化网页上的层级关系来进一步处理数据,将需要的内容放入数组或者字典(当然也可以直接打印result来看层级关系,看个人习惯).

那么我们所需要的内容就是字典中nick所对应的值,通过遍历将其取出来放入数组中,这里将这个数组定义为属性,在其他方法里会用到.

// 将搜索范围的内容放入数组
for (NSDictionary *diction in result) {
  [self.arrOfSeachBoxes addObject:diction[@"nick"]];
 }

接下来我们创建一个UITableView用来显示数据,搜索条需要用到的类是UISearchController,先看看如何创建:

系统的注释说的很清楚,如果想要在当前页显示搜索结果,这个方法的参数填nil即可,为了方便起见,声明一个UISearchController的属性

@property (nonatomic, retain) UISearchController *searchController;

接下来是创建

// nil表示在当前页面显示搜索结果
self.searchController = [[UISearchController alloc] initWithSearchResultsController:nil];

UISearchController头文件中被放在非常靠前的位置的是一个属性

根据字面意思我们可以猜到这跟搜索结果的更新有关,就跟tableViewreloadData一个意思.那么很明显,我们得签协议<UISearchResultsUpdating>,这个协议中只有一个必须要实现的方法.

- (void)updateSearchResultsForSearchController:(UISearchController *)searchController;

头文件如下图所示:

---------这里是美丽的分割线---------

上面已经把所有关于搜索条的类和方法罗列了一下,下面来捋一捋

所有定义的属性如下所示:

NS_ASSUME_NONNULL_BEGIN
@interface ViewController () <UITableViewDelegate, UITableViewDataSource, UISearchResultsUpdating>
@property (nonatomic, retain) NSMutableArray *arrOfSeachBoxes;/**< 搜索范围 */
@property (nonatomic, retain) NSMutableArray *arrOfSeachResults;/**< 搜索结果 */
@property (nonatomic, retain) UISearchController *searchController;
@property (nonatomic, retain) UITableView *tableView;
@end
NS_ASSUME_NONNULL_END

数据处理相关代码如下:

// 解析数据
NSString *path = [[NSBundle mainBundle] pathForResource:@"heros" ofType:@"txt"];
NSData *data = [NSData dataWithContentsOfFile:path];
id result = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];
self.arrOfSeachBoxes = [NSMutableArray array];
// 将搜索范围的内容放入数组
for (NSDictionary *dic in result) {
 [self.arrOfSeachBoxes addObject:dic[@"nick"]];
}

和UISearchController的创建相关代码如下:

// 创建
self.searchController = [[UISearchController alloc] initWithSearchResultsController:nil];

//searchBar的frame
self.searchController.searchBar.frame = CGRectMake(0, 44, 0, 44);

// 是否需要在输入搜索内容时变暗
self.searchController.dimsBackgroundDuringPresentation = false;

self.searchController.searchBar.showsCancelButton = YES;/**< 取消按钮 */

self.searchController.searchResultsUpdater = self;/**< 显示搜索结果的VC */

self.searchController.active = YES;/**< 搜索结果显示 */

和tableView相关的代码如下:

// tableView
self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 20, self.view.bounds.size.width, self.view.bounds.size.height - 20) style:UITableViewStylePlain];

[self.view addSubview:self.tableView];

self.tableView.delegate = self;

self.tableView.dataSource = self;

[self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"pool"];

//将SearchBar放在tableView的头部视图
self.tableView.tableHeaderView = self.searchController.searchBar;

UISearchResultsUpdating协议方法代码如下:

- (void)updateSearchResultsForSearchController:(UISearchController *)searchController {

//初始化存储搜索结果的数组
self.arrOfSeachResults = [NSMutableArray array];

// 获取关键字
NSPredicate *predicate = [NSPredicate predicateWithFormat:@"SELF CONTAINS[c] %@", searchController.searchBar.text];

// 用关键字过滤数组中的内容, 将过滤后的内容放入结果数组
self.arrOfSeachResults = [[self.arrOfSeachBoxes filteredArrayUsingPredicate:predicate] mutableCopy];

// 完成数据的过滤和存储后刷新tableView.
[self.tableView reloadData];
}

tableView的DataSource

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

// 显示搜索结果时
if (self.searchController.active) {

 //以搜索结果的个数返回行数
 return self.arrOfSeachResults.count;
}
 //没有搜索时显示所有数据
 return self.arrOfSeachBoxes.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"pool"];

// 显示搜索结果时
if (self.searchController.active) {

// 原始搜索结果字符串.
NSString *originResult = self.arrOfSeachResults[indexPath.row];

// 获取关键字的位置
NSRange range = [originResult rangeOfString:self.searchController.searchBar.text];

// 转换成可以操作的字符串类型.
NSMutableAttributedString *attribute = [[NSMutableAttributedString alloc] initWithString:originResult];

// 添加属性(粗体)
[attribute addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:20] range:range];

// 关键字高亮
[attribute addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:range];

// 将带属性的字符串添加到cell.textLabel上.
[cell.textLabel setAttributedText:attribute];

cell.textLabel.text = self.arrOfSeachResults[indexPath.row];

 } else {

 cell.textLabel.text = self.arrOfSeachBoxes[indexPath.row];

  }

 return cell;
}

总结

以上就是如何实现IOS搜索栏及搜索关键字高亮的全部内容,感兴趣的同学可以自己动手操作实现下,希望对大家的学习有所帮助。

(0)

相关推荐

  • iOS 实现模糊搜索的功能

    模糊搜索的实现思路是当搜索框开始编辑时对搜索框中的文本与后台给的资源相对比,包含搜索文本的展示在tableview中. 关键部分代码如下: -(void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText { self.result = nil; for (int i = 0; i < self.nameArray.count; i++) { NSString *string = self.nameArr

  • iOS毛玻璃效果的实现及图片模糊效果的三种方法

    App设计时往往会用到一些模糊效果或者毛玻璃效果,iOS目前已提供一些模糊API可以让我们方便是使用. 话说苹果在iOS7.0之后,很多系统界面都使用了毛玻璃效果,增加了界面的美观性,比如下图的通知中心界面; 但是其iOS7.0的SDK并没有提供给开发者实现毛玻璃效果的API,所以很多人都是通过一些别人封装的框架来实现,后面我也会讲到一个; 其实在iOS7.0(包括)之前还是有系统的类可以实现毛玻璃效果的, 就是 UIToolbar这个类,并且使用相当简单,几行代码就可以搞定. 下面是代码实现:

  • iOS开发中视图的下拉放大和上拉模糊的效果实现

    把"秘密"的Cell效果整体视图都放到scrollView中,基本是和secret app 一模一样的效果了. 代码如下:(模糊效果的类就不写了,大家可以搜"UIImage+ImageEffects",还要导入Accelerate.framework) 1.MTSecretAppEffect.h 复制代码 代码如下: #import <Foundation/Foundation.h>    @interface MTSecretAppEffect : N

  • iOS应用中UISearchDisplayController搜索效果的用法

    新建Navigation-based Project.打开.xib文件,拖一个Search Bar and Search DisplayController 对象到Table View对象上方,如下图所示,选中File's Owner ,打开Connections面板: 现在我们来创建Search Bar和SearchDisplay Controller的出口.打开Assistant Editor,按住ctrl键,将SearchDisplay Controller拖到ViewController

  • iOS App开发中UISearchBar搜索栏组件的基本用法整理

    基本属性 复制代码 代码如下: @UISearchBar search = [[UISearchBar alloc]initWithFrame:CGRectMake(0,44,320,120)]; pragma mark -基本设置 复制代码 代码如下: //控件的样式 默认--0白色,1是黑色风格 /* UIBarStyleDefault          = 0, UIBarStyleBlack            = 1, search.barStyle =UIBarStyleDefau

  • IOS改变UISearchBar中搜索框的高度

    一.系统的searchBar 1.UISearchBar的中子控件及其布局 UIView(直接子控件) frame 等于 searchBar的bounds,view的子控件及其布局 UISearchBarBackground(间接子控件) frame 等于searchBar的bounds UISearchBarTextField(间接子控件) frame.origin等于(8.0, 6.0),即不等于searchBar的bounds 2.改变searchBar的frame只会影响其中搜索框的宽度

  • 简介iOS开发中应用SQLite的模糊查询和常用函数

    SQLite模糊查询 一.示例 说明:本文简单示例了SQLite的模糊查询 1.新建一个继承自NSObject的模型 该类中的代码: 复制代码 代码如下: // //  YYPerson.h //  03-模糊查询 // //  Created by apple on 14-7-27. //  Copyright (c) 2014年 wendingding. All rights reserved. // #import <Foundation/Foundation.h> @interface

  • 如何实现IOS_SearchBar搜索栏及关键字高亮

    搜索框的效果演示: 这个就是所谓的搜索框了,那么接下来我们看看如何使用代码来实现这个功能. 我所使用的数据是英雄联盟的英雄名单,是一个JSON数据的txt文件, JSON数据的处理代码如下所示: //获取文件的路径path NSString *path = [[NSBundle mainBundle] pathForResource:@"heros" ofType:@"txt"]; //将路径下的文件转换成NSData数据 NSData *data = [NSDat

  • 在 Angular 中实现搜索关键字高亮示例

    在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数据展示在页面中. 但是,在有些情况下,比如我们有一个搜索框,希望将搜索的关键字在正文中高亮出来,这时候就会感觉比较吃力了,filter 可以帮助我们处理这种情况. 实际上,很多时候,我们的数据是不能直接输出到 DOM 中的,典型的比如日期,或者货币等等,通常需要将我们内部的数据格式化之后,再输出到页

  • vue2实现搜索结果中的搜索关键字高亮的代码

    具体代码如下所示: // 筛选变色 brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && keyword !== '') { return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>') } else { return val } } // 或者用

  • angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例

    本篇angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例,分享给大家,具体如下: 添加一个pipe: import { Pipe, Injectable, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Pipe({ name: 'keyword' }) @Injectable() export class KeywordPipe im

  • javascript网页关键字高亮代码

    //高亮网页关键字的javascript代码 var keys = [ ["脚本",http://www.jb51.net,"#ff0000"], ["小说",http://www.kanshule.com,"#00ff00"], ["念经","http://www.baidu.com","#0000ff"], ["工会","http:/

  • JavaScript实现关键字高亮功能

    高亮功能主要是指对页面中指定区域的指定文字进行高亮显示,也就是背景着色.一般在搜索结果页面会经常用到这个功能. 下面就为大家提供一种解决方案,用javascript实现. 首先在<head>中引入下面javascript方法: 复制代码 代码如下: <script type="text/javascript"> //<![CDATA[     //--------begin function fHl(o, flag, rndColor, url)-----

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

    一. 需求要求实现的效果 汉字支持汉字直接搜索.拼音全拼搜索.拼音简拼搜索 搜索匹配到的关键字高亮显示 搜索结果优先显示全部匹配.其次是拼音全拼匹配.拼音简拼匹配:关键字在结果字符串中位置越靠前,优先显示 支持搜索英文.汉字.电话号码及混合搜索 二. 需求分析 英文名称及电话号码的搜索直接使用完全匹配的方式即可 重难点是汉字的拼音相关的拼音全拼.简拼搜索,比如 "刘亦菲" 对应的搜索关键字有且只有以下三大类总计 25 种匹配汉字:"刘"."亦".

  • vue+Element实现搜索关键字高亮功能

    最近做了一个日志搜索的需求,要在页面上实现海量日志的关键字搜索.为了搜索更清晰,我最终实现了多条件搜索,且搜索结果的记录中的关键字全部高亮. 一.实现思路 1 实时监控表格,实现关键字的定位: 2 点击搜索按钮以后,实现记录中关键字的样式变化(即高亮). 二.实现过程 1 搜索条件表单 了解了实现思路,就让我们一起来看一下实现过程(关键位置均给了注释) <el-form :inline="true" :model="formQuery" > <el

  • Angularjs实现搜索关键字高亮显示效果

    需求分析: 根据关键字搜索网页内容,并且高亮显示内容中的关键字 细节分析: 1.每次执行搜索操作,需清空上一次结果 2.需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况 代码思路: 利用正则表达式匹配关键字 使用javascript字符串替换的方式,将关键字替换成<span class='red'>关键字</span> 为了避免出现当关键字为 'p' 时候,将标签<p>替换成<<span>p</span>

  • Centos下搭建golang环境及vim高亮Go关键字设置的方法

    一.Centos搭建go环境 1:下载  https://golang.org/dl/ 下载        go1.4.1.Linux-amd64.tar.gz           ArchiveLinux64-bit 2:切换sudo权限解压到/usr/local/目录下  tar xzvf go1.4.1.linux-amd64.tar.gz -C /usr/local/ 3:返回普通用户权限 4:设置PATH vi ~/.bash_profile export GOROOT=/usr/lo

随机推荐