HarmonyOS ArkUI Search 搜索框：联想词、历史记录与热门标签

发布时间：2026/10/21 21:45:46

HarmonyOS ArkUI Search 搜索框：联想词、历史记录与热门标签
系列鸿蒙 HarmonyOS 6.1 新特性实战 · 第 41 篇Search 组件是 ArkUI 中专为搜索场景设计的输入控件内置搜索按钮、清除图标和键盘触发机制。本篇将完整实现联想词实时过滤、历史记录去重管理以及热门标签一键触发搜索三大功能覆盖实际 App 搜索页面的典型交互需求。运行效果初始状态点击热门标签后显示搜索结果Search 组件基础配置Search 组件通过双向绑定value属性同步输入内容placeholder提供占位文案。与普通 TextInput 不同它内置了右侧搜索按钮和一键清除图标更贴近搜索场景的交互习惯。Search({ value: this.searchVal, placeholder: 请输入搜索关键词 }) .searchButton(搜索) .placeholderColor(#aaaaaa) .placeholderFont({ size: 14 }) .textFont({ size: 14 }) .onChange((val: string) { this.searchVal val this.filterSuggestions(val) }) .onSubmit((val: string) { this.doSearch(val) })onChange每次按键后触发适合实时联想词过滤onSubmit用户点击键盘“搜索“键或右侧搜索按钮时触发用于执行正式搜索searchButton设置右侧按钮文字传入空字符串则隐藏按钮联想词实时过滤联想词从预设关键词数组中过滤使用indexOf实现大小写不敏感匹配。结果列表显示在搜索框正下方点击即填充关键词并触发搜索。private allKeywords: string[] [ HarmonyOS, ArkUI, ArkTS, 鸿蒙开发, 组件教程, 状态管理, 路由导航, 网络请求, 数据持久化, 动画效果 ] State suggestions: string[] [] filterSuggestions(val: string): void { if (val.trim().length 0) { this.suggestions [] return } const lower val.toLowerCase() this.suggestions this.allKeywords.filter( (k: string) k.toLowerCase().indexOf(lower) ! -1 ) }联想词列表渲染if (this.suggestions.length 0) { Column() { ForEach(this.suggestions, (item: string) { Text(item) .width(100%) .padding({ left: 16, top: 10, bottom: 10 }) .fontSize(14) .fontColor(#333333) .backgroundColor(#ffffff) .onClick(() { this.searchVal item this.suggestions [] this.doSearch(item) }) Divider().strokeWidth(0.5).color(#eeeeee) }) } .width(100%) .borderRadius(8) .shadow({ radius: 8, color: #22000000, offsetY: 4 }) }历史记录管理搜索历史存储在状态数组中提交时去重插入到队列头部保留最近 10 条。支持单条删除和一键清空。State history: string[] [] doSearch(keyword: string): void { const trimmed keyword.trim() if (trimmed.length 0) return // 去重已存在则先移除旧条目 const filtered this.history.filter((h: string) h ! trimmed) // 插入队首最多保留 10 条 const updated [trimmed, ...filtered] this.history updated.length 10 ? updated.slice(0, 10) : updated this.suggestions [] this.searchVal trimmed } removeHistory(item: string): void { this.history this.history.filter((h: string) h ! item) }历史记录渲染区域Row() { Text(历史记录).fontSize(13).fontColor(#999999).layoutWeight(1) Text(清空).fontSize(13).fontColor(#0066ff) .onClick(() { this.history [] }) } .width(100%).padding({ left: 4, right: 4, bottom: 8 }) Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.history, (item: string) { Row({ space: 4 }) { Text(item).fontSize(13).fontColor(#333333) Text(×).fontSize(13).fontColor(#aaaaaa) .onClick(() { this.removeHistory(item) }) } .padding({ left: 10, right: 10, top: 6, bottom: 6 }) .margin({ right: 8, bottom: 8 }) .backgroundColor(#f5f5f5) .borderRadius(16) .onClick(() { this.searchVal item this.doSearch(item) }) }) }热门标签热门标签固定展示点击直接触发搜索无需经过输入框。使用Flex组件实现自动换行。private hotTags: string[] [ 鸿蒙 6.1 新特性, ArkUI 组件, 状态管理, 动画教程, 网络请求 ] Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.hotTags, (tag: string, index: number) { Text(tag) .fontSize(13) .fontColor(#0066ff) .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .margin({ right: 8, bottom: 8 }) .border({ width: 1, color: #0066ff, radius: 16 }) .onClick(() { this.searchVal tag this.doSearch(tag) }) }) }完整代码import router from ohos.router Entry Component struct SearchPage { State searchVal: string State suggestions: string[] [] State history: string[] [] State searchResult: string private allKeywords: string[] [ HarmonyOS, ArkUI, ArkTS, 鸿蒙开发, 组件教程, 状态管理, 路由导航, 网络请求, 数据持久化, 动画效果 ] private hotTags: string[] [ 鸿蒙 6.1 新特性, ArkUI 组件, 状态管理, 动画教程, 网络请求 ] filterSuggestions(val: string): void { if (val.trim().length 0) { this.suggestions [] return } const lower val.toLowerCase() this.suggestions this.allKeywords.filter( (k: string) k.toLowerCase().indexOf(lower) ! -1 ) } doSearch(keyword: string): void { const trimmed keyword.trim() if (trimmed.length 0) return const filtered this.history.filter((h: string) h ! trimmed) const updated [trimmed, ...filtered] this.history updated.length 10 ? updated.slice(0, 10) : updated this.suggestions [] this.searchVal trimmed this.searchResult 搜索「${trimmed}」共找到 ${Math.floor(Math.random() * 100) 1} 条结果 } removeHistory(item: string): void { this.history this.history.filter((h: string) h ! item) } build() { Column({ space: 0 }) { // 顶部标题栏 Row() { Text(搜索).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#333333) } .width(100%) .height(56) .padding({ left: 16, right: 16 }) // 搜索框区域 Column() { Search({ value: this.searchVal, placeholder: 请输入搜索关键词 }) .searchButton(搜索) .placeholderColor(#aaaaaa) .placeholderFont({ size: 14 }) .textFont({ size: 14 }) .width(100%) .onChange((val: string) { this.searchVal val this.filterSuggestions(val) }) .onSubmit((val: string) { this.doSearch(val) }) // 联想词下拉 if (this.suggestions.length 0) { Column() { ForEach(this.suggestions, (item: string) { Text(item) .width(100%) .padding({ left: 16, top: 10, bottom: 10 }) .fontSize(14) .fontColor(#333333) .backgroundColor(#ffffff) .onClick(() { this.searchVal item this.suggestions [] this.doSearch(item) }) Divider().strokeWidth(0.5).color(#eeeeee) }) } .width(100%) .borderRadius(8) .shadow({ radius: 8, color: #22000000, offsetY: 4 }) } } .width(100%) .padding({ left: 16, right: 16 }) // 搜索结果提示 if (this.searchResult.length 0) { Text(this.searchResult) .width(100%) .padding({ left: 16, right: 16, top: 12 }) .fontSize(13) .fontColor(#0066ff) } Scroll() { Column({ space: 0 }) { // 历史记录 if (this.history.length 0) { Column({ space: 4 }) { Row() { Text(历史记录).fontSize(13).fontColor(#999999).layoutWeight(1) Text(清空).fontSize(13).fontColor(#0066ff) .onClick(() { this.history [] }) } .width(100%) .padding({ left: 4, right: 4, bottom: 8 }) Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.history, (item: string) { Row({ space: 4 }) { Text(item).fontSize(13).fontColor(#333333) Text(×).fontSize(13).fontColor(#aaaaaa) .onClick(() { this.removeHistory(item) }) } .padding({ left: 10, right: 10, top: 6, bottom: 6 }) .margin({ right: 8, bottom: 8 }) .backgroundColor(#f5f5f5) .borderRadius(16) .onClick(() { this.searchVal item this.doSearch(item) }) }) } } .width(100%) .padding({ left: 16, right: 16, top: 16, bottom: 8 }) } // 热门搜索 Column({ space: 4 }) { Text(热门搜索).fontSize(13).fontColor(#999999).width(100%) .padding({ left: 4, bottom: 8 }) Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.hotTags, (tag: string) { Text(tag) .fontSize(13) .fontColor(#0066ff) .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .margin({ right: 8, bottom: 8 }) .border({ width: 1, color: #0066ff, radius: 16 }) .onClick(() { this.searchVal tag this.doSearch(tag) }) }) } } .width(100%) .padding({ left: 16, right: 16, top: 16 }) } } .layoutWeight(1) } .width(100%) .height(100%) .backgroundColor(#f8f8f8) } }API 速查属性/方法说明Search({ value, placeholder })创建搜索框value 绑定输入内容.searchButton(text)设置右侧搜索按钮文字空字符串隐藏.placeholderColor(color)占位文字颜色.placeholderFont({ size })占位文字字体支持 size/weight/style.textFont({ size })输入文字字体配置.onChange(callback)每次输入变化触发参数为当前输入值.onSubmit(callback)点击搜索键或搜索按钮时触发Array.filter(fn)数组过滤ArkTS 中可直接使用String.indexOf(str)查找子串位置-1 表示不存在小结onChange在每次按键时触发适合实时联想词过滤onSubmit在提交搜索时触发两者职责分离历史记录去重先filter移除已有条目再插入队首保证顺序且无重复ArkTS 中Array.filter()是标准方法可直接使用避免使用数组解构语法联想词列表使用shadow属性模拟下拉浮层效果无需额外弹窗组件热门标签固定展示使用Flex FlexWrap.Wrap实现自动换行适配不同屏幕宽度搜索框清空输入时应同步清空联想词列表避免遮挡下方内容上一篇RichEditor 富文本编辑器实战 | 下一篇QRCode 与 PatternLock 安全组件

相关新闻

大学生暑假自学C语言完整路线｜避开新手大坑，零基础稳步入门

大学生暑假自学C语言完整路线｜避开新手大坑，零基础稳步入门

很多计算机专业的同学，都会把暑假当成补齐编程基础的黄金时间段。C语言作为编程入门的经典语言，是理解内存、指针、底层逻辑的敲门砖。但大部分人自学C都会陷入误区：抱着厚厚的教材死啃理论，看得懂文字，写不出代码&…

2026/10/19 16:15:03 阅读更多 →
编译原理硬核从零构建一个微型编译器——中间代码生成实战（六）

编译原理硬核从零构建一个微型编译器——中间代码生成实战（六）

1. 定位导航 本篇是 实战核心：把 #4 的文法、#5 的翻译方案组装成一个完整可运行的微型编译器。五节内容各贡献一个部件： 节 部件 在最终代码里的位置 2.4 递归下降分析 + 左递归消除 expr() / term() / factor() 2.5 翻译方案嵌入分析器 emit() 调用点 2.6 词法分析器 lex(…

2026/10/21 10:48:26 阅读更多 →
仅限内部技术白皮书流出：Cursor AB测试代码安全边界规范（含GDPR合规检查清单与敏感参数熔断机制）

仅限内部技术白皮书流出：Cursor AB测试代码安全边界规范（含GDPR合规检查清单与敏感参数熔断机制）

更多请点击： https://intelliparadigm.com 第一章：Cursor AB测试代码安全边界规范总览 在基于 Cursor 的 AB 测试开发流程中，代码安全边界是保障实验隔离性、防止数据污染与权限越权的核心防线。本规范聚焦于静态分析可识别的边界约束、运行…

2026/10/21 23:23:03 阅读更多 →

最新新闻

Electron桌面应用开发实战：从环境搭建到打包发布全流程

Electron桌面应用开发实战：从环境搭建到打包发布全流程

做前端这些年，我大部分时间都在跟浏览器标签页打交道，直到第一次把桌面应用跑起来，才发现原来自己一直被限制在地址栏和刷新按钮围起来的框框里。Electron这个词，最开始是在某段时间频繁出现在同事的讨论里，一个用HTML…

2026/10/21 9:32:40 阅读更多 →
滑盖智能锁T109深度解析：结构原理、安装调试与故障排查

滑盖智能锁T109深度解析：结构原理、安装调试与故障排查

简介：亚太天能T109滑盖智能锁产品说明书是一份PDF格式的官方技术文档，主要面向智能锁安装人员、终端用户及售后维护者，帮助快速掌握产品安装、配置与常见故障处理。全包仅1个PDF文件，大小4.37MB，内容结构清晰&#xff…

2026/10/21 9:32:40 阅读更多 →
PMSM弱磁控制原理与Simulink建模：高速AGV驱动系统设计指南

PMSM弱磁控制原理与Simulink建模：高速AGV驱动系统设计指南

上个月我在调试一台高速AGV的驱动系统，整车要求空载跑到8m/s，电机转速已经拉到额定点，驱动器的输出电压也顶到了母线电压极限附近。再往上踩速度指令，转速纹丝不动，三相电流反而开始震荡。那会儿我的第一反应就是&…

2026/10/21 9:32:40 阅读更多 →
C++核心知识点：从内存管理到STL的实战指南

C++核心知识点：从内存管理到STL的实战指南

C 这门语言我前前后后折腾了十几年，用它写过嵌入式驱动、做过游戏服务端，也搭过基础组件库。每次看到新人一头扎进"C 核心知识点"这个搜索词，我其实挺感慨的——这门语言的难点从来不是语法多，而是知识点之间的耦合太深…

2026/10/21 9:32:40 阅读更多 →
T109滑盖智能锁怎么装？安装调试与故障排查全攻略

T109滑盖智能锁怎么装？安装调试与故障排查全攻略

简介：亚太天能T109滑盖智能锁产品说明书以PDF格式发布，适合智能锁用户、安装人员与售后维修人员阅读。内容围绕T109系列指纹密码刷卡锁展开，先介绍前面板、后面板、锁体、机械钥匙、电池盒盖等部件名称与功能，再给出完整安装步骤&…

2026/10/21 9:32:40 阅读更多 →
LLM知识降熵：从信息垄断到理解权下放

LLM知识降熵：从信息垄断到理解权下放

你有没有过这种经历：翻开源码注释、论文摘要或者一份专业报告，每个字都认识，连在一起却像天书。想找人聊聊，身边要么没人懂，要么懂的懒得跟你解释。后来我试着把同一段内容丢给一个大语言模型，几秒钟之后&a…

2026/10/21 9:31:32 阅读更多 →

日新闻

周新闻

基于GMM的语音识别系统原理与MATLAB实现详解

基于GMM的语音识别系统原理与MATLAB实现详解

说到基于高斯混合模型（GMM）的语音识别系统，很多人第一反应就是一堆数学公式，觉得门槛很高。但如果你真的在MATLAB里把它落地跑通，会发现核心其实就是三件事：把声音变成特征向量，用GMM给每个类别…

2026/10/22 1:47:45 阅读更多 →
数字图像处理入门：反白、灰度化、调色板修改与导出txt实践

数字图像处理入门：反白、灰度化、调色板修改与导出txt实践

数字图像处理这四个字听起来挺唬人，但落到具体操作上，无非就是让计算机按你的想法“摆弄”像素。我在一个模拟项目X里用了一套特别经典的基础处理流程：对图像做反白、改调色板、彩色转灰度，最后把像素数据导出成txt文件。单看每一…

2026/10/21 21:32:28 阅读更多 →
机器人大脑技术盘点：具身智能的感知、决策与数据闭环

机器人大脑技术盘点：具身智能的感知、决策与数据闭环

如果你的信息流最近也天天刷到“机器人大脑”这个词，你会发现一个很有意思的现象：每个人说的“大脑”根本不是同一个东西。有人指的是大语言模型，有人指的是运动控制系统，还有人指的是能理解物理世界的端到端模型。在2026年这个时…

2026/10/21 4:27:17 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/21 21:50:56 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/21 21:51:55 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/21 16:24:48 阅读更多 →