HarmonyOS APP＜玩转React＞开源教程二十八：搜索功能实现

第28次：搜索功能实现

本文讲解搜索模块，对应SearchService.ets和SearchPage.ets。它的目标不是做互联网级全文检索，而是在本地教程数据范围内，帮助用户快速定位模块和课时。

搜索功能在这个项目里的真实作用

当前搜索功能主要覆盖两个维度：

• 搜模块
• 搜课时

它不会去搜开源项目、源码章节、错题本，也没有远程接口。这样的范围其实很合理，因为搜索首先要服务项目最核心的学习主链路。

一、为什么搜索服务要在首页初始化时就准备好

SearchService依赖完整的modules数据，所以它在Index.ets的初始化流程里就会被调用：

• SearchService.init(this.modules)

这样做有两个好处：

1. 搜索页打开时不需要再重新读取教程数据。
2. 搜索结果与首页、课程列表页使用的是同一份模块数据，状态一致。

这再次体现了项目里很重要的一个设计原则：统一数据源，多页面复用。

二、搜索服务内部到底做了什么

SearchService.search(query)的逻辑很清楚：

1. 过滤空查询和纯空白。
2. 统一转成小写，做简单标准化。
3. 遍历全部模块。
4. 如果模块标题或描述命中，就生成模块结果。
5. 再遍历模块下的全部课时。
6. 如果课时标题或描述命中，就生成课时结果。

也就是说，当前搜索是一个很典型的本地遍历式搜索。它不复杂，但足够稳定、清晰，而且对于当前数据规模完全够用。

三、为什么结果对象要统一成SearchResult

模块和课时本来是两种不同数据，但搜索结果最终都被组织成统一的SearchResult。这非常重要，因为页面只需要面向一种结果结构去渲染，就不必写两套完全不同的列表逻辑。

SearchResult中常见的关键字段有：

• type
• id
• title
• description
• moduleId
• moduleTitle
• difficulty
• matchedText

这说明服务层在帮页面做“格式对齐”。页面只关心怎么显示，不必再自己判断原始数据长什么样。

四、搜索页为什么实时搜索而不是点击按钮搜索

SearchPage里TextInput的onChange会直接触发performSearch()。这意味着用户边输入，边看到结果变化。

对于当前项目这种纯本地、小数据量搜索来说，这种方式很合适，因为：

• 反馈快
• 无需额外点击
• 交互更自然

如果未来数据量变大，再考虑防抖、分页、索引也不迟。教程写法一定要基于当前项目规模，而不是一上来就过度设计。

五、搜索页为什么要有热门搜索

当输入框为空时，页面不会留下一片空白，而是展示“热门搜索”标签。这有两个好处：

1. 帮用户快速开始，不知道搜什么时可以直接点。
2. 提示应用里最核心的知识主题，比如Hooks、useState、Props等。

从产品角度看，热门搜索不仅是一个入口，也是一个“内容导览”。它在无输入状态下承担了轻量推荐作用。

六、搜索结果列表为什么区分模块和课时

当前搜索结果用不同图标区分：

• 模块：📚
• 课时：📖

并且课时结果还会额外显示所属模块名和难度信息。这一点非常重要，因为用户搜到一个课时时，往往还想知道：

• 它属于哪个模块
• 处在什么难度层级

如果没有这些上下文，搜索结果就会显得很碎。当前实现虽然简单，但上下文信息保留得不错，这会让用户更容易判断“这是不是我想找的内容”。

七、当前搜索能力的边界也要讲清楚

教程不能只讲优点，不讲边界。当前搜索实现有几个明显范围：

• 只搜模块和课时
• 主要基于标题和描述
• 匹配方式是简单includes
• 没有分词、权重排序、拼音搜索

这些都不是缺点，而是当前版本的合理边界。你写教程时应该告诉读者：这是一个面向本地教学数据的小而美搜索，而不是复杂检索引擎。

八、自己实操时怎么验证最有效

1. 从个人中心进入搜索页。
2. 不输入内容，先点几个热门搜索词。
3. 输入模块标题关键词，观察模块结果。
4. 输入课时关键词，观察课时结果。
5. 分别点击模块结果和课时结果，确认导航是否正确。

通过这几步，你就能把搜索的“初始化 -> 检索 -> 结果 -> 导航”完整走一遍。

九、本篇常见坑

1. 页面自己拿原始模块数据直接搜

更好的方式是通过SearchService统一封装结果结构。

2. 结果里不区分模块和课时

用户会很难判断应该点哪里。

3. 搜索页空状态不做任何展示

热门搜索能显著提升搜索功能的使用率。

4. 把当前功能吹成“高级搜索”

教程要真实说明当前实现的边界。

本篇小结

搜索模块的价值，不在于算法多复杂，而在于它是否和当前项目的数据结构、使用场景足够匹配。当前项目的搜索功能做到了三件很实用的事：

• 初始化一次，多页复用
• 统一结果结构，页面渲染简单
• 支持从结果直接跳回学习主链路

这就是一个小型教学应用里很合适的搜索设计。

跟着真实源码继续往下看

搜索服务的真实核心逻辑如下：

for(constmoduleofSearchService.allModules){if(SearchService.matchesQuery(module.title,normalizedQuery)||SearchService.matchesQuery(module.description,normalizedQuery)){results.push({type:'module',id:module.id,title:module.title,description:module.description,difficulty:module.difficulty});}

搜索页输入即检索的真实代码如下：

TextInput({placeholder:'搜索课程...',text:this.query}).onChange((value:string)=>{this.query=value;this.performSearch();})

按这个顺序动手

1. 打开SearchService.ets，先读search()。
2. 再打开SearchPage.ets，看输入框变化如何直接驱动结果刷新。
3. 最后观察模块结果和课时结果点击后分别跳去哪里。

课后练习

1. 思考如果要加入“搜索源码章节”，你最想扩展SearchResult的哪些字段。
2. 说明为什么热门搜索词本质上也属于内容运营的一部分。
3. 尝试设计一个“最近搜索记录”功能，并说明它更适合放在页面状态还是服务层存储中。