Cordova与OpenHarmony高级搜索系统-编程实验室

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

高级搜索系统概述

高级搜索系统为用户提供了更精细的搜索控制。在Cordova框架与OpenHarmony系统的结合下，我们需要实现一个功能完整的高级搜索系统，支持多条件组合搜索和复杂的查询逻辑。

高级搜索查询模型

classAdvancedSearchQuery{constructor(){this.conditions=[];this.operator='AND';// AND 或 ORthis.sortBy='relevance';// relevance, date, namethis.sortOrder='desc';// asc 或 desc}addCondition(field,operator,value){this.conditions.push({field:field,operator:operator,// =, !=, >, <, >=, <=, contains, startsWith, endsWithvalue:value});}removeCondition(index){this.conditions.splice(index,1);}clearConditions(){this.conditions=[];}}classAdvancedSearchEngine{constructor(){this.query=newAdvancedSearchQuery();}executeQuery(){letresults=[];// 搜索植物results=results.concat(this.searchPlants());// 搜索记录results=results.concat(this.searchRecords());// 应用排序results=this.sortResults(results);returnresults;}searchPlants(){returnplants.filter(plant=>this.evaluateConditions(plant));}searchRecords(){constallRecords=[...wateringManager.records,...fertilizingManager.records,...pruningManager.records];returnallRecords.filter(record=>this.evaluateConditions(record));}evaluateConditions(item){if(this.query.conditions.length===0)returntrue;constresults=this.query.conditions.map(condition=>this.evaluateCondition(item,condition));if(this.query.operator==='AND'){returnresults.every(r=>r);}else{returnresults.some(r=>r);}}evaluateCondition(item,condition){constvalue=item[condition.field];switch(condition.operator){case'=':returnvalue===condition.value;case'!=':returnvalue!==condition.value;case'>':returnvalue>condition.value;case'<':returnvalue<condition.value;case'>=':returnvalue>=condition.value;case'<=':returnvalue<=condition.value;case'contains':returnString(value).includes(String(condition.value));case'startsWith':returnString(value).startsWith(String(condition.value));case'endsWith':returnString(value).endsWith(String(condition.value));default:returnfalse;}}sortResults(results){returnresults.sort((a,b)=>{letcompareValue=0;if(this.query.sortBy==='date'){compareValue=newDate(a.date)-newDate(b.date);}elseif(this.query.sortBy==='name'){compareValue=String(a.name).localeCompare(String(b.name));}returnthis.query.sortOrder==='asc'?compareValue:-compareValue;});}}

这个高级搜索系统定义了AdvancedSearchQuery和AdvancedSearchEngine类。支持多条件组合搜索和复杂的查询逻辑。

与OpenHarmony数据库的集成

functionexecuteAdvancedSearchInDatabase(query){cordova.exec(function(result){console.log("高级搜索完成");renderAdvancedSearchResults(result);},function(error){console.error("搜索失败:",error);},"DatabasePlugin","advancedSearch",[{conditions:query.conditions,operator:query.operator,sortBy:query.sortBy,sortOrder:query.sortOrder}]);}

这段代码展示了如何与OpenHarmony的数据库进行高级搜索。

高级搜索页面

functionrenderAdvancedSearchPage(){constcontainer=document.getElementById('page-container');container.innerHTML=`<div class="advanced-search-page"> <h2>高级搜索</h2> <div class="search-builder"> <div class="conditions-section"> <h3>搜索条件</h3> <div id="conditions-list"></div> <button onclick="addSearchCondition()">➕ 添加条件</button> </div> <div class="operator-section"> <label> <input type="radio" name="operator" value="AND" checked> 所有条件都满足 (AND) </label> <label> <input type="radio" name="operator" value="OR"> 任意条件满足 (OR) </label> </div> <div class="sort-section"> <label>排序方式: <select id="sort-by"> <option value="relevance">相关性</option> <option value="date">日期</option> <option value="name">名称</option> </select> </label> <label> <input type="radio" name="sort-order" value="desc" checked> 降序 </label> <label> <input type="radio" name="sort-order" value="asc"> 升序 </label> </div> <div class="search-actions"> <button onclick="executeAdvancedSearch()">🔍 搜索</button> <button onclick="resetAdvancedSearch()">重置</button> </div> </div> <div id="advanced-search-results"></div> </div>`;renderConditionsList();}functionaddSearchCondition(){constconditionsList=document.getElementById('conditions-list');constconditionIndex=conditionsList.children.length;constconditionDiv=document.createElement('div');conditionDiv.className='condition-item';conditionDiv.id=`condition-${conditionIndex}`;conditionDiv.innerHTML=`<select class="condition-field" onchange="updateConditionOperators(${conditionIndex})"> <option value="">选择字段</option> <option value="name">植物名称</option> <option value="species">物种</option> <option value="location">位置</option> <option value="health">健康状态</option> <option value="date">日期</option> <option value="amount">数量</option> </select> <select class="condition-operator"> <option value="=">=</option> <option value="!=">!=</option> <option value=">">></option> <option value="<"><</option> <option value="contains">包含</option> <option value="startsWith">开头是</option> <option value="endsWith">结尾是</option> </select> <input type="text" class="condition-value" placeholder="输入值"> <button onclick="removeSearchCondition(${conditionIndex})">✕</button>`;conditionsList.appendChild(conditionDiv);}functionremoveSearchCondition(index){constconditionDiv=document.getElementById(`condition-${index}`);if(conditionDiv){conditionDiv.remove();}}functionexecuteAdvancedSearch(){constquery=newAdvancedSearchQuery();// 收集条件constconditionItems=document.querySelectorAll('.condition-item');conditionItems.forEach(item=>{constfield=item.querySelector('.condition-field').value;constoperator=item.querySelector('.condition-operator').value;constvalue=item.querySelector('.condition-value').value;if(field&&value){query.addCondition(field,operator,value);}});// 获取操作符constoperatorRadios=document.querySelectorAll('input[name="operator"]');operatorRadios.forEach(radio=>{if(radio.checked){query.operator=radio.value;}});// 获取排序选项query.sortBy=document.getElementById('sort-by').value;constsortOrderRadios=document.querySelectorAll('input[name="sort-order"]');sortOrderRadios.forEach(radio=>{if(radio.checked){query.sortOrder=radio.value;}});// 执行搜索constsearchEngine=newAdvancedSearchEngine();searchEngine.query=query;constresults=searchEngine.executeQuery();renderAdvancedSearchResults(results);}functionresetAdvancedSearch(){document.getElementById('conditions-list').innerHTML='';document.getElementById('advanced-search-results').innerHTML='';renderAdvancedSearchPage();}

这个函数创建高级搜索页面，允许用户添加多个搜索条件并设置排序选项。

搜索结果展示

functionrenderAdvancedSearchResults(results){constresultsContainer=document.getElementById('advanced-search-results');resultsContainer.innerHTML=`<div class="results-header"> <h3>搜索结果</h3> <p>找到${results.length}个结果</p> </div>`;if(results.length===0){resultsContainer.innerHTML+='<p class="empty-message">未找到匹配的结果</p>';return;}constresultsList=document.createElement('div');resultsList.className='results-list';results.forEach(result=>{constresultItem=document.createElement('div');resultItem.className='result-item';if(result.name){resultItem.innerHTML=`<h4>${result.name}</h4> <p>${result.species||result.type||''}</p> <p>${result.location||result.date||''}</p>`;}else{resultItem.innerHTML=`<h4>${result.plantId}</h4> <p>类型:${result.type||'记录'}</p> <p>日期:${newDate(result.date).toLocaleDateString('zh-CN')}</p>`;}resultsList.appendChild(resultItem);});resultsContainer.appendChild(resultsList);}

这个函数负责渲染高级搜索的结果。

搜索模板

classSearchTemplate{constructor(name,conditions){this.id='template_'+Date.now();this.name=name;this.conditions=conditions;}}classSearchTemplateManager{constructor(){this.templates=[];this.loadFromStorage();}saveTemplate(name,conditions){consttemplate=newSearchTemplate(name,conditions);this.templates.push(template);this.saveToStorage();returntemplate;}loadTemplate(templateId){returnthis.templates.find(t=>t.id===templateId);}deleteTemplate(templateId){this.templates=this.templates.filter(t=>t.id!==templateId);this.saveToStorage();}}