当前位置：首页 > news >正文

Cordova与OpenHarmony全文搜索功能

news 2026/5/31 11:05:12

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

全文搜索系统概述

全文搜索功能允许用户快速查找应用中的任何内容。在Cordova框架与OpenHarmony系统的结合下，我们需要实现一个高效的搜索系统，支持多种搜索类型和过滤选项。

搜索引擎数据模型

classSearchIndex{constructor(){this.index=newMap();// 关键词 -> 结果数组this.buildIndex();}buildIndex(){// 索引植物plants.forEach(plant=>{this.addToIndex(plant.name,{type:'plant',data:plant});this.addToIndex(plant.species,{type:'plant',data:plant});});// 索引分类categoryManager.categories.forEach(cat=>{this.addToIndex(cat.name,{type:'category',data:cat});});// 索引标签tagManager.tags.forEach(tag=>{this.addToIndex(tag.name,{type:'tag',data:tag});});}addToIndex(keyword,result){constkey=keyword.toLowerCase();if(!this.index.has(key)){this.index.set(key,[]);}this.index.get(key).push(result);}search(keyword){constkey=keyword.toLowerCase();constresults=[];// 精确匹配if(this.index.has(key)){results.push(...this.index.get(key));}// 模糊匹配for(const[indexKey,indexResults]ofthis.index.entries()){if(indexKey.includes(key)&&indexKey!==key){results.push(...indexResults);}}returnresults;}}

这个搜索引擎数据模型定义了SearchIndex类。它建立了一个倒排索引，支持精确匹配和模糊匹配。

与OpenHarmony搜索服务的集成

functionperformFullTextSearch(keyword){cordova.exec(function(result){console.log("搜索完成");renderSearchResults(result);},function(error){console.error("搜索失败:",error);},"SearchPlugin","search",[{keyword:keyword,searchTypes:['plants','categories','tags','records'],limit:50}]);}functionindexContent(){cordova.exec(function(result){console.log("内容已索引");},function(error){console.error("索引失败:",error);},"SearchPlugin","indexContent",[{plants:plants,categories:categoryManager.categories,tags:tagManager.tags}]);}

这段代码展示了如何与OpenHarmony的搜索服务集成。performFullTextSearch函数执行搜索，indexContent函数建立索引。

搜索结果展示

functionrenderSearchResults(results){constcontainer=document.getElementById('page-container');container.innerHTML=`<div class="search-results-container"> <h2>搜索结果</h2> <p>找到${results.length}个结果</p> </div>`;if(results.length===0){container.innerHTML+='<p class="empty-message">未找到匹配的结果</p>';return;}// 按类型分组结果constgroupedResults={};results.forEach(result=>{if(!groupedResults[result.type]){groupedResults[result.type]=[];}groupedResults[result.type].push(result);});// 渲染每个类型的结果Object.keys(groupedResults).forEach(type=>{consttypeResults=groupedResults[type];consttypeSection=document.createElement('div');typeSection.className='result-type-section';typeSection.innerHTML=`<h3>${getTypeLabel(type)}(${typeResults.length})</h3>`;typeResults.forEach(result=>{constresultItem=document.createElement('div');resultItem.className='result-item';if(result.type==='plant'){resultItem.innerHTML=`<h4>${result.data.name}</h4> <p>物种:${result.data.species}</p> <p>位置:${result.data.location}</p> <button onclick="viewPlantDetails('${result.data.id}')">查看</button>`;}elseif(result.type==='category'){resultItem.innerHTML=`<h4>${result.data.name}</h4> <p>${result.data.description}</p> <button onclick="viewCategory('${result.data.id}')">查看</button>`;}elseif(result.type==='tag'){resultItem.innerHTML=`<h4>${result.data.name}</h4> <p>使用次数:${result.data.usageCount}</p> <button onclick="viewTag('${result.data.id}')">查看</button>`;}typeSection.appendChild(resultItem);});container.appendChild(typeSection);});}functiongetTypeLabel(type){constlabels={'plant':'🌿 植物','category':'📂 分类','tag':'🏷️ 标签','record':'📝 记录'};returnlabels[type]||type;}

这个函数负责渲染搜索结果。结果按类型分组展示，用户可以快速查看不同类型的搜索结果。

搜索页面

functionrenderSearchPage(){constcontainer=document.getElementById('page-container');container.innerHTML=`<div class="search-page"> <div class="search-header"> <h2>全文搜索</h2> <div class="search-box"> <input type="text" id="search-input" placeholder="搜索植物、分类、标签..."> <button onclick="executeSearch()">🔍 搜索</button> </div> </div> <div class="search-filters"> <label> <input type="checkbox" id="filter-plants" checked> 植物 </label> <label> <input type="checkbox" id="filter-categories" checked> 分类 </label> <label> <input type="checkbox" id="filter-tags" checked> 标签 </label> <label> <input type="checkbox" id="filter-records" checked> 记录 </label> </div> <div id="search-results"></div> </div>`;document.getElementById('search-input').addEventListener('keypress',function(e){if(e.key==='Enter'){executeSearch();}});}functionexecuteSearch(){constkeyword=document.getElementById('search-input').value;if(!keyword){showToast('请输入搜索关键词');return;}constfilters={plants:document.getElementById('filter-plants').checked,categories:document.getElementById('filter-categories').checked,tags:document.getElementById('filter-tags').checked,records:document.getElementById('filter-records').checked};performFullTextSearch(keyword);}

这个函数创建搜索页面，包括搜索框和过滤选项。用户可以输入关键词并选择搜索类型。

搜索历史管理

classSearchHistory{constructor(maxHistory=20){this.history=[];this.maxHistory=maxHistory;this.loadFromStorage();}addSearch(keyword){// 移除重复的搜索this.history=this.history.filter(h=>h!==keyword);// 添加到开头this.history.unshift(keyword);// 保持历史记录数量在限制内if(this.history.length>this.maxHistory){this.history.pop();}this.saveToStorage();}getHistory(){returnthis.history;}clearHistory(){this.history=[];this.saveToStorage();}}

这个SearchHistory类管理用户的搜索历史。用户可以查看之前的搜索并快速重复搜索。

搜索建议功能

functiongetSearchSuggestions(keyword){constsuggestions=[];// 从植物名称获取建议plants.forEach(plant=>{if(plant.name.toLowerCase().includes(keyword.toLowerCase())){suggestions.push({text:plant.name,type:'plant',icon:'🌿'});}});// 从分类获取建议categoryManager.categories.forEach(cat=>{if(cat.name.toLowerCase().includes(keyword.toLowerCase())){suggestions.push({text:cat.name,type:'category',icon:'📂'});}});// 从标签获取建议tagManager.tags.forEach(tag=>{if(tag.name.toLowerCase().includes(keyword.toLowerCase())){suggestions.push({text:tag.name,type:'tag',icon:'🏷️'});}});returnsuggestions.slice(0,10);// 返回前10个建议}functionrenderSearchSuggestions(suggestions){constsuggestionsList=document.createElement('div');suggestionsList.className='suggestions-list';suggestions.forEach(suggestion=>{constitem=document.createElement('div');item.className='suggestion-item';item.innerHTML=`<span class="suggestion-icon">${suggestion.icon}</span> <span class="suggestion-text">${suggestion.text}</span>`;item.onclick=()=>{document.getElementById('search-input').value=suggestion.text;executeSearch();};suggestionsList.appendChild(item);});returnsuggestionsList;}

这段代码实现了搜索建议功能。当用户输入时，系统会显示相关的建议，帮助用户快速找到所需内容。

搜索统计

classSearchStatistics{constructor(searchHistory){this.searchHistory=searchHistory;}getMostSearchedKeywords(limit=10){constcounts={};this.searchHistory.history.forEach(keyword=>{counts[keyword]=(counts[keyword]||0)+1;});returnObject.entries(counts).sort((a,b)=>b[1]-a[1]).slice(0,limit).map(([keyword,count])=>({keyword,count}));}getSearchTrends(){returnthis.searchHistory.history.slice(0,20);}}