news 2026/7/7 20:18:38

Cordova与OpenHarmony全文搜索功能

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Cordova与OpenHarmony全文搜索功能

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

全文搜索系统概述

全文搜索功能允许用户快速查找应用中的任何内容。在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);}}

这个SearchStatistics类提供了搜索的统计功能。getMostSearchedKeywords返回最常搜索的关键词,getSearchTrends返回最近的搜索趋势。

总结

全文搜索功能是植物养护应用的重要功能。通过高效的搜索引擎和与OpenHarmony搜索服务的集成,我们可以创建一个功能完整的搜索系统,帮助用户快速找到所需的信息。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/7 4:13:55

团队项目管理软件哪个好?9款协作高效、界面友好的工具对比测评

本文旨在为企业管理系统选型者提供一份基于数据实测与逻辑推演的团队项目管理软件评估指南。团队项目管理软件作为企业数字化转型的核心基础设施&#xff0c;其本质是通过算法与流程规范来解决组织内部的信息不对称与资源冲突问题。 随着企业对数据安全主权意识的增强以及远程/…

作者头像 李华
网站建设 2026/7/7 15:20:42

ADTS (Audio Data Transport Stream)

ADTS (Audio Data Transport Stream) 是AAC音频编码的一种传输流封装格式&#xff0c;专为网络流媒体传输设计。核心特点&#xff1a;每帧独立解码&#xff1a;每个AAC帧前都添加ADTS头信息&#xff0c;允许在任意位置开始解码流式传输友好&#xff1a;支持实时播放&#xff0c…

作者头像 李华
网站建设 2026/7/7 16:04:22

个人财务管理工具 HomeBank v5.9.6 中文便携版

链接&#xff1a; https://pan.quark.cn/s/87fccd2f8c56 介绍 HomeBank 是一款开源免费财务管理软件&#xff0c;可帮助您管理个人账户和开支。HomeBank 易于使用图形和自定义过滤器&#xff0c;旨在为您提供财务概览。如果您正在寻找一个完全免费&#xff0c;简单的应用程序…

作者头像 李华
网站建设 2026/7/7 19:42:20

Excel高性能异步导出完整方案!

大型电商系统中&#xff0c;数据导出是一个高频且重要的功能需求。传统的同步导出方式在面对大数据量时往往会导致请求超时、内存溢出等问题&#xff0c;严重影响用户体验。苏三商城项目创新性地设计并实现了一套完整的Excel异步导出机制&#xff0c;通过注解驱动、任务队列、定…

作者头像 李华
网站建设 2026/7/7 15:04:32

家长必看,别等孩子近视了,再看到这篇文章!

近年来&#xff0c;我国儿童青少年近视问题日益严峻。数据显示&#xff0c;我国儿童青少年总体近视率超过50%&#xff0c;其中小学生超过三分之一&#xff0c;初中生超过70%&#xff0c;高中生甚至高达80%以上。更令人心惊的是&#xff0c;近视危机正呈现低龄化趋势&#xff0c…

作者头像 李华
网站建设 2026/7/7 14:26:25

【计算机毕业设计案例】基于Spring Boot+Vue人力资源管理系统的设计与实现基于springboot的人力资源管理系统的设计与实现(程序+文档+讲解+定制)

博主介绍&#xff1a;✌️码农一枚 &#xff0c;专注于大学生项目实战开发、讲解和毕业&#x1f6a2;文撰写修改等。全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围&#xff1a;&am…

作者头像 李华