news 2026/4/23 13:12:06

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/4/18 22:06:07

Cordova与OpenHarmony高级搜索系统

欢迎大家加入开源鸿蒙跨平台开发者社区&#xff0c;一起共建开源鸿蒙跨平台生态。 高级搜索系统概述 高级搜索系统为用户提供了更精细的搜索控制。在Cordova框架与OpenHarmony系统的结合下&#xff0c;我们需要实现一个功能完整的高级搜索系统&#xff0c;支持多条件组合搜索和…

作者头像 李华
网站建设 2026/4/18 0:04:24

ARGB和对其原理是什么

1. ARGB 原理ARGB 是带 Alpha&#xff08;透明&#xff09;通道的像素格式&#xff0c;核心是 “AlphaRGB 三原色” 的 4 通道存储&#xff0c;文档中用的 PIXEL_FORMAT_ARGB_8888 是最常用类型&#xff1a;每个通道占 8 位&#xff08;1 字节&#xff09;&#xff0c;总 32 位…

作者头像 李华
网站建设 2026/4/20 2:33:35

JAVA|文件管理系统 V3.0

前言 在前两篇文章中我们已经完成了界面的基础设计和布局&#xff0c;并实现了创建文件和文件夹的功能。那么本次我们将聚焦于实现通过鼠标点击的方式打开文件和文件夹的功能。 文章目录前言一、核心目标与技术栈1. 核心目标2. 技术栈二、关键技术1、获取事件源和instanceof关…

作者头像 李华
网站建设 2026/4/17 18:04:24

Django 中创建用户与修改密码

在 Django 中创建用户有多种方式&#xff0c;具体取决于你是想通过 管理后台、命令行 还是 代码&#xff08;视图/API&#xff09; 来实现。 以下是三种最常用的方法&#xff1a;1. 使用命令行创建管理员 (Superuser) 如果你是刚开始开发项目&#xff0c;需要进入 Django Admin…

作者头像 李华
网站建设 2026/4/23 11:12:58

1分钟对接500个大模型?这才叫 AI 开发!

你一听&#xff0c;心想&#xff1a;不就是调个 API 的事儿嘛&#xff0c;有啥难的&#xff1f;于是你撸起袖子就开始写代码&#xff0c;先接入了 OpenAI 的 GPT 模型。刚刚搞定&#xff0c;屑老板说&#xff1a;还要加上 Claude 模型&#xff0c;听说它在某些场景下表现更好。…

作者头像 李华
网站建设 2026/4/23 11:13:36

【计算机毕业设计案例】基于springboot的养宠物指南服务平台系统的设计与实现宠物养护全周期的知识服务与社群互动设计系统(程序+文档+讲解+定制)

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

作者头像 李华