搜索与过滤功能-Cordova 与 OpenHarmony 混合开发实战

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

本文对应模块：Web 层的搜索与过滤功能实现，包括全文搜索、高级过滤、搜索建议、与原生层的搜索事件同步机制。

📌 概述

搜索与过滤是应用的重要功能，帮助用户快速找到所需的任务。搜索与过滤包括全文搜索、高级过滤、搜索建议等功能。SearchEngine 类是搜索的核心，负责实现各类搜索和过滤算法。通过搜索与过滤，用户可以在大量任务中快速定位目标。

🔗 搜索与过滤的完整流程

搜索与过滤分为三层：Web 层的 SearchEngine（搜索引擎）负责搜索和过滤的算法实现，TaskManager（任务管理器）提供任务数据，DatabaseModule（数据库模块）负责数据的查询。当用户输入搜索关键词时，SearchEngine 执行全文搜索，在任务标题和描述中查找匹配的内容。当用户应用过滤条件时，SearchEngine 根据状态、优先级、分类等条件过滤任务。当用户输入搜索框时，SearchEngine 提供搜索建议，帮助用户快速找到常用的搜索词。

搜索与过滤与任务管理不同，它关注的是数据的查询和展示。用户可以使用多种搜索方式，例如按关键词搜索、按状态过滤、按优先级过滤、按分类过滤、按日期范围过滤等。搜索可以组合多个条件，实现复杂的查询。搜索建议功能可以记录用户的搜索历史，提供智能推荐。

搜索与过滤的实现需要考虑以下几个方面：首先是搜索算法的效率，需要支持快速的全文搜索。其次是过滤条件的灵活性，需要支持多个条件的组合。第三是搜索建议的准确性，需要根据用户的搜索历史提供相关建议。第四是搜索结果的排序，需要按相关性或其他条件排序结果。最后是与原生层的集成，需要通过 Cordova 插件将搜索事件通知给原生层。

搜索与过滤在实际应用中非常有用。用户可以通过搜索来快速找到特定的任务。例如，用户可以搜索"项目"来找到所有与项目相关的任务。用户也可以使用过滤来查看特定状态的任务，例如查看所有未完成的高优先级任务。通过搜索与过滤的组合，用户可以精确定位所需的任务。

🔧 搜索引擎实现

搜索引擎的核心实现包括全文搜索、高级过滤、搜索建议等功能。全文搜索时需要在标题和描述中查找关键词。高级过滤时需要支持多个条件的组合。搜索建议时需要返回相关的搜索词。

// 搜索引擎的关键方法classSearchEngine{staticsearch(keyword,tasks=taskManager.getAllTasks()){constlowerKeyword=keyword.toLowerCase();returntasks.filter(task=>task.title.toLowerCase().includes(lowerKeyword)||(task.description&&task.description.toLowerCase().includes(lowerKeyword)));}staticadvancedSearch(filters){letresults=taskManager.getAllTasks();if(filters.keyword)results=this.search(filters.keyword,results);if(filters.status)results=results.filter(t=>t.status===filters.status);if(filters.priority)results=results.filter(t=>t.priority===filters.priority);if(filters.category)results=results.filter(t=>t.category===filters.category);if(filters.dateFrom&&filters.dateTo){results=results.filter(t=>t.dueDate>=filters.dateFrom&&t.dueDate<=filters.dateTo);}returnresults;}staticgetSuggestions(keyword){consttasks=taskManager.getAllTasks();constsuggestions=newSet();tasks.forEach(task=>{if(task.title.toLowerCase().includes(keyword.toLowerCase())){suggestions.add(task.title);}});returnArray.from(suggestions).slice(0,5);}}

代码解释：

SearchEngine 类提供了搜索和过滤的核心功能。search() 方法执行全文搜索，将关键词转换为小写后在任务标题和描述中查找匹配的内容。advancedSearch() 方法执行高级搜索，支持多个过滤条件的组合，包括关键词、状态、优先级、分类和日期范围。getSuggestions() 方法提供搜索建议，根据输入的关键词返回最多5个匹配的任务标题。

� 原生层的搜索事件同步

HarmonyOS 原生层也需要与 Web 层的搜索功能进行集成。原生层可以通过 Cordova 插件来接收来自 Web 层的搜索事件。

// ArkTS 代码示例 - 搜索同步插件import{CordovaPlugin,CallbackContext}from'@magongshou/harmony-cordova/Index';import{PluginResult,MessageStatus}from'@magongshou/harmony-cordova/Index';exportclassSearchSyncPluginextendsCordovaPlugin{// 监听 Web 层的搜索事件asynconSearchExecuted(callbackContext:CallbackContext,args:string[]):Promise<void>{try{constsearchData=JSON.parse(args[0]);console.log('[SearchSyncPlugin] 搜索已执行:',searchData.keyword);console.log('[SearchSyncPlugin] 搜索结果数:',searchData.resultCount);constresult=PluginResult.createByString(MessageStatus.OK,'搜索已同步');callbackContext.sendPluginResult(result);}catch(error){constresult=PluginResult.createByString(MessageStatus.ERROR,(errorasError).message);callbackContext.sendPluginResult(result);}}// 监听 Web 层的过滤事件asynconFilterApplied(callbackContext:CallbackContext,args:string[]):Promise<void>{try{constfilterData=JSON.parse(args[0]);console.log('[SearchSyncPlugin] 过滤已应用:',filterData.filterType);constresult=PluginResult.createByString(MessageStatus.OK,'过滤已同步');callbackContext.sendPluginResult(result);}catch(error){constresult=PluginResult.createByString(MessageStatus.ERROR,(errorasError).message);callbackContext.sendPluginResult(result);}}}

原生代码解释：

SearchSyncPlugin 是一个 Cordova 插件，提供了原生层与 Web 层搜索功能的交互接口。onSearchExecuted 方法监听 Web 层的搜索事件，接收搜索关键词和搜索结果数。原生层可以根据这个事件更新原生层的搜索结果显示或保存搜索历史。onFilterApplied 方法监听 Web 层的过滤事件，接收过滤类型。原生层可以根据这个事件同步原生层的过滤条件。

Web 层通知原生搜索事件

Web 层可以调用原生插件来通知原生层搜索相关的事件：

// JavaScript 代码 - 通知原生搜索事件functionnotifySearchExecuted(keyword,resultCount){cordova.exec(function(){console.log('原生层已收到搜索通知');},function(error){console.error('通知失败:',error);},'SearchSyncPlugin','onSearchExecuted',[JSON.stringify({keyword,resultCount})]);}functionnotifyFilterApplied(filterType,filterValue){cordova.exec(function(){console.log('原生层已收到过滤通知');},function(error){console.error('通知失败:',error);},'SearchSyncPlugin','onFilterApplied',[JSON.stringify({filterType,filterValue})]);}

Web 层代码解释：

notifySearchExecuted 函数使用 cordova.exec() 调用原生插件的 onSearchExecuted 方法，传递搜索关键词和搜索结果数。这样可以从 Web 层通知原生层搜索已执行。notifyFilterApplied 函数调用原生插件的 onFilterApplied 方法，传递过滤类型和过滤值。这样可以从 Web 层通知原生层过滤已应用。通过这些函数，Web 层可以将搜索事件同步给原生层，使原生层能够保持与 Web 层的搜索状态一致。

📝 总结

搜索与过滤是应用的重要功能，通过全文搜索和多条件过滤，用户可以快速找到所需的任务。通过与原生层的集成，可以实现搜索事件的完整同步，使用户在不同层级都能看到最新的搜索结果。
}

.search-result-item {
padding: var(–spacing-md);
background-color: var(–color-bg-primary);
border-radius: var(–radius-md);
border-left: 4px solid var(–color-primary);
cursor: pointer;
transition: all var(–transition-base);
}

.search-result-item:hover {
box-shadow: var(–shadow-md);
}

.result-title {
font-weight: var(–font-weight-semibold);
color: var(–color-text-primary);
margin-bottom: var(–spacing-xs);
}

.result-meta {
font-size: var(–font-size-sm);
color: var(–color-text-secondary);
}

## 📝 总结 强大的搜索和过滤功能提高了任务查找的效率。 ---