旅行记录应用全文搜索 - Cordova OpenHarmony 混合开发实战

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

📌 概述

全文搜索功能允许用户通过关键词快速查找旅行记录。搜索功能支持在旅行的多个字段中进行搜索，如目的地、描述、标签等。全文搜索提供了快速访问特定旅行的便利。在 Cordova 与 OpenHarmony 的混合开发框架中，全文搜索需要实现高效的搜索算法和原生层的索引优化。

🔗 完整流程

第一步：搜索索引建立与维护

全文搜索需要在数据库中建立搜索索引，提高搜索效率。索引可以包括旅行的目的地、描述、标签等字段。当旅行数据更新时，需要同时更新搜索索引。

搜索索引的维护需要考虑性能问题，避免频繁的索引重建。

第二步：搜索结果展示与排序

搜索页面需要展示搜索结果的列表。搜索结果可以按相关度、日期等进行排序。用户可以点击搜索结果查看旅行详情。

搜索功能还需要提供搜索历史和热门搜索词的展示，提升用户体验。

第三步：原生层搜索优化与缓存

OpenHarmony 原生层可以实现搜索结果的缓存，避免重复搜索。原生层还可以实现搜索的自动完成功能，提供搜索建议。

🔧 Web 代码实现

全文搜索页面 HTML 结构

<divid="search-page"class="page"><divclass="page-header"><h1>全文搜索</h1></div><divclass="search-container"><divclass="search-box"><inputtype="text"id="searchInput"placeholder="搜索旅行..."class="search-input"onkeyup="handleSearch()"><buttonclass="btn-search"onclick="performSearch()">🔍</button></div><divclass="search-suggestions"id="searchSuggestions"style="display:none;"><!-- 搜索建议动态加载 --></div><divclass="search-results"id="searchResults"><!-- 搜索结果动态加载 --></div><divclass="search-history"id="searchHistory"><h3>搜索历史</h3><divclass="history-items"id="historyItems"><!-- 搜索历史动态加载 --></div></div></div></div>

HTML 结构包含搜索输入框、搜索建议、搜索结果和搜索历史。

执行搜索函数

letsearchHistory=[];asyncfunctionperformSearch(){constquery=document.getElementById('searchInput').value.trim();if(!query){showToast('请输入搜索关键词');return;}try{// 添加到搜索历史if(!searchHistory.includes(query)){searchHistory.unshift(query);if(searchHistory.length>10){searchHistory.pop();}saveSearchHistory();}// 从数据库查询所有旅行constallTrips=awaitdb.getAllTrips();// 执行搜索constresults=searchTrips(allTrips,query);// 渲染搜索结果renderSearchResults(results);// 隐藏搜索建议document.getElementById('searchSuggestions').style.display='none';// 通知原生层if(window.cordova){cordova.exec((result)=>console.log('Search performed:',result),(error)=>console.error('Search error:',error),'SearchPlugin','onSearchPerformed',[{query:query,resultCount:results.length,timestamp:Date.now()}]);}}catch(error){console.error('Error performing search:',error);showToast('搜索失败');}}

执行搜索函数将搜索词添加到搜索历史，然后执行搜索操作。performSearch 函数是全文搜索的核心执行函数。函数首先获取搜索框中的输入值，并进行验证。然后将搜索词添加到搜索历史中，最多保留 10 条历史记录。这样用户可以快速重复之前的搜索。接着从数据库获取所有旅行数据，调用 searchTrips 函数执行搜索操作。搜索完成后，函数渲染搜索结果，隐藏搜索建议，并通过 Cordova 插件通知原生层进行相应的处理。通过这个函数，用户可以快速找到想要的旅行记录。

搜索算法函数

functionsearchTrips(trips,query){constlowerQuery=query.toLowerCase();returntrips.filter(trip=>{// 在多个字段中搜索constdestination=(trip.destination||'').toLowerCase();constdescription=(trip.description||'').toLowerCase();consttags=(trip.tags||[]).map(t=>t.toLowerCase()).join(' ');// 计算相关度分数letscore=0;if(destination.includes(lowerQuery)){score+=10;// 目的地匹配权重最高}if(description.includes(lowerQuery)){score+=5;}if(tags.includes(lowerQuery)){score+=3;}returnscore>0;}).sort((a,b)=>{// 按相关度排序constaScore=calculateRelevance(a,query);constbScore=calculateRelevance(b,query);returnbScore-aScore;});}

搜索算法函数在多个字段中搜索关键词，并计算相关度分数进行排序。searchTrips 函数实现了全文搜索的核心算法。函数首先将搜索关键词转换为小写，以支持不区分大小写的搜索。然后使用 filter 方法遍历所有旅行，在多个字段中搜索关键词，包括目的地、描述和标签。为了提高搜索结果的质量，函数为不同字段的匹配分配不同的权重：目的地匹配权重最高（10 分），描述匹配权重中等（5 分），标签匹配权重较低（3 分）。这样可以确保最相关的搜索结果显示在最前面。最后使用 sort 方法按相关度分数进行排序，使得最相关的旅行显示在最前面。这种设计提供了高质量的搜索结果。

相关度计算函数

functioncalculateRelevance(trip,query){constlowerQuery=query.toLowerCase();letscore=0;// 目的地匹配if(trip.destination&&trip.destination.toLowerCase().includes(lowerQuery)){score+=10;}// 描述匹配if(trip.description&&trip.description.toLowerCase().includes(lowerQuery)){score+=5;}// 标签匹配if(trip.tags){trip.tags.forEach(tag=>{if(tag.toLowerCase().includes(lowerQuery)){score+=3;}});}returnscore;}

相关度计算函数为不同字段的匹配分配不同的权重。calculateRelevance 函数计算每个旅行与搜索关键词的相关度分数。函数遍历旅行的多个字段，检查是否包含搜索关键词。对于每个匹配，函数根据字段的重要性分配相应的分数。目的地是最重要的字段，因为用户通常按目的地搜索旅行，所以分配最高的权重（10 分）。描述字段次之（5 分），因为描述可能包含关键信息。标签字段权重最低（3 分），因为标签通常是辅助信息。通过这种加权方式，可以确保搜索结果按相关度排序，最相关的旅行显示在最前面。这种设计提高了搜索的准确性和用户体验。

搜索建议函数

asyncfunctionshowSearchSuggestions(){constquery=document.getElementById('searchInput').value.trim();if(!query){document.getElementById('searchSuggestions').style.display='none';return;}try{// 获取所有旅行constallTrips=awaitdb.getAllTrips();// 收集建议constsuggestions=newSet();constlowerQuery=query.toLowerCase();allTrips.forEach(trip=>{if(trip.destination&&trip.destination.toLowerCase().includes(lowerQuery)){suggestions.add(trip.destination);}});// 渲染建议constcontainer=document.getElementById('searchSuggestions');container.innerHTML='';Array.from(suggestions).slice(0,5).forEach(suggestion=>{constitem=document.createElement('div');item.className='suggestion-item';item.textContent=suggestion;item.onclick=()=>{document.getElementById('searchInput').value=suggestion;performSearch();};container.appendChild(item);});container.style.display=suggestions.size>0?'block':'none';}catch(error){console.error('Error showing suggestions:',error);}}

搜索建议函数根据用户输入提供搜索建议，提升用户体验。showSearchSuggestions 函数实现了搜索自动完成功能。当用户在搜索框中输入内容时，函数会根据输入的关键词提供搜索建议。函数首先获取搜索框中的输入值，然后从数据库获取所有旅行。接着遍历所有旅行，收集与输入关键词匹配的目的地。使用 Set 数据结构可以自动去重，避免重复的建议。最后渲染建议列表，最多显示 5 条建议。用户可以点击建议项快速执行搜索。这个功能大大提高了搜索的效率，用户不需要完整输入搜索词就可以看到相关的建议。

搜索结果渲染函数

functionrenderSearchResults(results){constcontainer=document.getElementById('searchResults');container.innerHTML='';if(results.length===0){container.innerHTML='<p class="no-results">未找到匹配的旅行</p>';return;}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)}</span> </div> <div class="result-body"> <p class="result-description">${trip.description||'暂无描述'}</p> </div> <div class="result-footer"> <button class="btn-small" onclick="navigateTo('trip-detail',${trip.id})"> 查看详情 </button> </div>`;container.appendChild(resultElement);});}

搜索结果渲染函数展示搜索结果列表。renderSearchResults 函数负责将搜索结果渲染到页面上。函数首先清空结果容器，然后检查是否有搜索结果。如果没有结果，显示"未找到匹配的旅行"的提示信息。如果有结果，遍历结果数组，为每个旅行创建一个结果卡片。每个卡片包含旅行的目的地、开始日期、描述和查看详情按钮。这种设计提供了清晰的搜索结果展示，用户可以快速浏览搜索结果并选择感兴趣的旅行。

🔌 OpenHarmony 原生代码实现

搜索缓存插件

// SearchPlugin.etsimport{BusinessError}from'@ohos.base';exportclassSearchPlugin{privatesearchCache:Map<string,any>=newMap();privatecacheExpireTime:number=5*60*1000;// 5分钟过期// 处理搜索事件onSearchPerformed(args:any,callback:Function):void{try{constquery=args[0].query;constresultCount=args[0].resultCount;consttimestamp=args[0].timestamp;// 缓存搜索结果this.searchCache.set(query,{resultCount:resultCount,timestamp:timestamp});console.log(`[Search] Query: "${query}", Results:${resultCount}`);callback({success:true,message:'搜索已缓存'});}catch(error){callback({success:false,error:error.message});}}// 获取搜索缓存getSearchCache(args:any,callback:Function):void{try{constquery=args[0].query;constcacheEntry=this.searchCache.get(query);if(cacheEntry&&Date.now()-cacheEntry.timestamp<this.cacheExpireTime){callback({success:true,data:cacheEntry});}else{callback({success:false,data:null});}}catch(error){callback({success:false,error:error.message});}}}

搜索缓存插件在原生层缓存搜索结果，提高搜索性能。SearchPlugin 是 OpenHarmony 原生层的搜索管理插件，负责处理与搜索相关的原生操作。插件维护了一个搜索缓存 Map，用于存储最近执行的搜索查询和结果数量。缓存设置了 5 分钟的过期时间，确保缓存数据的新鲜度。onSearchPerformed 方法处理搜索事件，当用户执行搜索时，将搜索查询和结果数量缓存起来。getSearchCache 方法提供了获取缓存数据的接口，检查缓存是否存在且未过期。通过这个插件，Web 层可以充分利用原生层的缓存机制，避免重复的搜索操作，提高搜索性能。

📝 总结

全文搜索功能展示了如何在 Cordova 与 OpenHarmony 框架中实现一个高效的搜索系统。Web 层负责搜索 UI 和搜索算法，原生层负责缓存管理。通过搜索建议和搜索历史，提升了用户体验。