旅行记录应用高级搜索 - Cordova OpenHarmony 混合开发实战-育师

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

📌 概述

高级搜索功能提供了更强大的搜索能力，用户可以通过多个条件组合进行精确搜索。高级搜索支持按日期范围、花费范围、目的地、标签等多个条件进行搜索。这个功能满足了用户对特定旅行的精确查找需求。在 Cordova 与 OpenHarmony 的混合开发框架中，高级搜索需要实现复杂的查询逻辑和原生层的性能优化。

🔗 完整流程

第一步：高级搜索条件设计与验证

高级搜索需要支持多个搜索条件，包括日期范围、花费范围、目的地、标签、同行者等。这些条件需要进行验证，确保数据的有效性。搜索条件可以保存为搜索模板，用户可以快速重用。

第二步：复杂查询逻辑实现

高级搜索需要实现复杂的查询逻辑，支持多个条件的组合。查询逻辑需要高效，避免全表扫描。可以使用数据库索引来优化查询性能。

第三步：原生层查询优化与结果缓存

OpenHarmony 原生层可以实现查询的优化和结果缓存。原生层可以预编译查询语句，提高查询效率。原生层还可以缓存常用的查询结果。

🔧 Web 代码实现

高级搜索页面 HTML 结构

<divid="advanced-search-page"class="page"><divclass="page-header"><h1>高级搜索</h1></div><divclass="advanced-search-container"><formid="advancedSearchForm"class="search-form"><divclass="form-group"><label>目的地</label><inputtype="text"name="destination"placeholder="输入目的地..."></div><divclass="form-group"><label>开始日期</label><inputtype="date"name="startDate"></div><divclass="form-group"><label>结束日期</label><inputtype="date"name="endDate"></div><divclass="form-group"><label>最小花费</label><inputtype="number"name="minExpense"placeholder="0"></div><divclass="form-group"><label>最大花费</label><inputtype="number"name="maxExpense"placeholder="999999"></div><divclass="form-group"><label>标签</label><selectname="tags"multiple><!-- 标签选项动态加载 --></select></div><divclass="form-actions"><buttontype="button"class="btn btn-primary"onclick="performAdvancedSearch()">搜索</button><buttontype="button"class="btn btn-secondary"onclick="resetSearchForm()">重置</button></div></form><divclass="search-results"id="advancedSearchResults"><!-- 搜索结果动态加载 --></div></div></div>

HTML 结构包含多个搜索条件输入框和搜索结果展示区域。

执行高级搜索函数

asyncfunctionperformAdvancedSearch(){try{// 获取表单数据constform=document.getElementById('advancedSearchForm');constformData=newFormData(form);constsearchCriteria={destination:formData.get('destination'),startDate:formData.get('startDate'),endDate:formData.get('endDate'),minExpense:parseInt(formData.get('minExpense'))||0,maxExpense:parseInt(formData.get('maxExpense'))||Infinity,tags:formData.getAll('tags')};// 从数据库查询所有旅行constallTrips=awaitdb.getAllTrips();// 执行高级搜索constresults=filterTrips(allTrips,searchCriteria);// 渲染搜索结果renderAdvancedSearchResults(results);// 通知原生层if(window.cordova){cordova.exec((result)=>console.log('Advanced search performed:',result),(error)=>console.error('Search error:',error),'AdvancedSearchPlugin','onAdvancedSearchPerformed',[{criteria:searchCriteria,resultCount:results.length,timestamp:Date.now()}]);}}catch(error){console.error('Error performing advanced search:',error);showToast('搜索失败');}}

执行高级搜索函数收集表单数据，然后执行搜索操作。performAdvancedSearch 函数是高级搜索的核心执行函数。函数首先获取高级搜索表单中的所有数据，包括目的地、日期范围、花费范围和标签。然后将这些数据组织成一个搜索条件对象。接着从数据库获取所有旅行数据，调用 filterTrips 函数根据搜索条件进行过滤。搜索完成后，函数渲染搜索结果，并通过 Cordova 插件通知原生层进行相应的处理。这个函数支持多条件组合搜索，用户可以根据多个维度精确查找旅行记录。

高级过滤函数

functionfilterTrips(trips,criteria){returntrips.filter(trip=>{// 目的地过滤if(criteria.destination&&!trip.destination.includes(criteria.destination)){returnfalse;}// 日期范围过滤if(criteria.startDate){consttripStartDate=newDate(trip.startDate);constfilterStartDate=newDate(criteria.startDate);if(tripStartDate<filterStartDate){returnfalse;}}if(criteria.endDate){consttripEndDate=newDate(trip.endDate);constfilterEndDate=newDate(criteria.endDate);if(tripEndDate>filterEndDate){returnfalse;}}// 花费范围过滤if(trip.expense<criteria.minExpense||trip.expense>criteria.maxExpense){returnfalse;}// 标签过滤if(criteria.tags.length>0){consthasAllTags=criteria.tags.every(tag=>trip.tags&&trip.tags.includes(tag));if(!hasAllTags){returnfalse;}}returntrue;});}

高级过滤函数根据多个条件对旅行列表进行过滤。filterTrips 函数实现了高级搜索的核心过滤逻辑。函数使用 filter 方法遍历所有旅行，根据搜索条件进行多维度的过滤。首先检查目的地是否匹配，如果指定了目的地但旅行的目的地不包含该关键词，则排除该旅行。然后检查日期范围，旅行的开始日期必须不早于过滤条件的开始日期，结束日期必须不晚于过滤条件的结束日期。接着检查花费范围，旅行的花费必须在指定的范围内。最后检查标签，如果指定了标签，旅行必须包含所有指定的标签。这种设计提供了灵活的多条件组合搜索能力，用户可以根据多个维度精确查找旅行记录。

搜索结果渲染函数

functionrenderAdvancedSearchResults(results){constcontainer=document.getElementById('advancedSearchResults');container.innerHTML='';if(results.length===0){container.innerHTML='<p class="no-results">未找到匹配的旅行</p>';return;}constresultSummary=document.createElement('div');resultSummary.className='result-summary';resultSummary.innerHTML=`<p>找到 <strong>${results.length}</strong> 条旅行记录</p> <p>总花费: <strong>¥${results.reduce((sum,t)=>sum+(t.expense||0),0)}</strong></p>`;container.appendChild(resultSummary);results.forEach(trip=>{constresultElement=document.createElement('div');resultElement.className='search-result-item';resultElement.innerHTML=`<div class="result-header"> <h3>${trip.destination}</h3> <span class="result-date">${formatDate(trip.startDate)}-${formatDate(trip.endDate)}</span> </div> <div class="result-body"> <p class="result-description">${trip.description||'暂无描述'}</p> <div class="result-stats"> <span>💰 ¥${trip.expense}</span> <span>👥${trip.companions||'独自旅行'}</span> </div> </div> <div class="result-footer"> <button class="btn-small" onclick="navigateTo('trip-detail',${trip.id})"> 查看详情 </button> </div>`;container.appendChild(resultElement);});}

搜索结果渲染函数展示搜索结果和统计信息。renderAdvancedSearchResults 函数负责将高级搜索结果渲染到页面上。函数首先清空结果容器，然后检查是否有搜索结果。如果没有结果，显示"未找到匹配的旅行"的提示信息。如果有结果，首先显示一个结果摘要，包括找到的旅行数量和总花费。这个摘要提供了快速的统计信息，帮助用户了解搜索结果的概况。然后遍历结果数组，为每个旅行创建一个结果卡片。每个卡片包含旅行的目的地、日期范围、描述、花费和同行者信息。这种设计提供了详细的搜索结果展示，用户可以快速浏览搜索结果并选择感兴趣的旅行。

重置搜索表单函数

functionresetSearchForm(){constform=document.getElementById('advancedSearchForm');form.reset();document.getElementById('advancedSearchResults').innerHTML='';}

重置函数清空表单和搜索结果。resetSearchForm 函数提供了重置高级搜索表单的功能。函数首先调用 form.reset() 方法清空表单中的所有输入值，将所有字段恢复到初始状态。然后清空搜索结果容器，移除之前的搜索结果。这个函数提供了一个简单的方式让用户重新开始搜索，无需手动清空每个字段。

🔌 OpenHarmony 原生代码实现

高级搜索优化插件

// AdvancedSearchPlugin.etsimport{BusinessError}from'@ohos.base';exportclassAdvancedSearchPlugin{privatequeryCache:Map<string,any>=newMap();// 处理高级搜索事件onAdvancedSearchPerformed(args:any,callback:Function):void{try{constcriteria=args[0].criteria;constresultCount=args[0].resultCount;consttimestamp=args[0].timestamp;// 生成缓存键constcacheKey=JSON.stringify(criteria);// 缓存搜索结果this.queryCache.set(cacheKey,{resultCount:resultCount,timestamp:timestamp});console.log(`[AdvancedSearch] Results:${resultCount}`);callback({success:true,message:'高级搜索已执行'});}catch(error){callback({success:false,error:error.message});}}// 获取查询缓存getQueryCache(args:any,callback:Function):void{try{constcriteria=args[0].criteria;constcacheKey=JSON.stringify(criteria);constcacheEntry=this.queryCache.get(cacheKey);if(cacheEntry){callback({success:true,data:cacheEntry});}else{callback({success:false,data:null});}}catch(error){callback({success:false,error:error.message});}}}

高级搜索优化插件在原生层缓存查询结果，提高搜索性能。AdvancedSearchPlugin 是 OpenHarmony 原生层的高级搜索管理插件，负责处理与高级搜索相关的原生操作。插件维护了一个查询缓存 Map，用于存储最近执行的高级搜索查询和结果数量。通过将搜索条件序列化为 JSON 字符串作为缓存键，可以精确匹配相同的搜索条件。onAdvancedSearchPerformed 方法处理高级搜索事件，当用户执行高级搜索时，将搜索条件和结果数量缓存起来。getQueryCache 方法提供了获取缓存数据的接口，检查是否存在相同条件的缓存。通过这个插件，Web 层可以充分利用原生层的缓存机制，避免重复的复杂查询操作，显著提高搜索性能。