📌 模块概述

高级搜索页面是在全文搜索基础上的扩展，它允许用户同时按照菜谱名称、分类、菜系、烹饪时间区间、人数区间和难度等多个条件组合筛选菜谱。相比只输入一个关键字的全文搜索，高级搜索更适合「今晚想吃中式、30 分钟以内、两人份的简单菜」这类精细化场景。在 Cordova&OpenHarmony 混合架构下，这个页面的 UI 依旧由 Web 层表单实现，筛选逻辑运行在 JavaScript 中；如需做更复杂的统计或跨设备共享筛选条件，则可以通过 ArkTS 插件进行扩展。

🔗 高级搜索数据流

1. 用户在高级搜索页面逐个设置条件，例如分类选择「晚餐」、难度选择「简单」、烹饪时间设置 0–30 分钟；
2. 点击搜索按钮后，performAdvancedSearch() 从表单控件中读取各个字段的值；
3. Web 层通过 db.getAllRecipes() 先获取全部菜谱，再在内存中按条件进行逐条过滤；
4. 过滤结果映射为菜谱卡片 HTML，写入结果区域；
5. 如果希望在多设备间共享常用搜索条件，可以在筛选完成后把条件打包，通过 Cordova 插件同步到 ArkTS 层。

🔧 高级搜索表单结构（HTML 片段）

<div class="card">
  <div class="card-content">
    <div class="form-group">
      <label class="form-label">菜谱名称</label>
      <input id="adv-name" class="form-control" placeholder="输入菜谱名称">
    </div>
    <div class="form-group">
      <label class="form-label">分类</label>
      <select id="adv-category" class="form-control">
        <option value="">全部分类</option>
        <option value="早餐">早餐</option>
        <option value="晚餐">晚餐</option>
      </select>
    </div>
  </div>
</div>
<div id="adv-search-results"></div>

这个 HTML 片段展示了高级搜索页面的表单雏形：每个条件对应一个 form-group，包含 label 和输入控件（input 或 select）。通过统一的表单样式，可以保证在 ArkWeb 环境中拥有一致的对齐与间距。所有控件都带有唯一的 id，方便后续在 JavaScript 中读取表单值。

🔧 高级搜索逻辑实现（JavaScript 片段）

async function performAdvancedSearch() {
  const name = document.getElementById('adv-name').value;
  const category = document.getElementById('adv-category').value;
  const difficulty = document.getElementById('adv-difficulty').value;

  let recipes = await db.getAllRecipes();
  recipes = recipes.filter(recipe => {
    if (name && !recipe.name.includes(name)) return false;
    if (category && recipe.category !== category) return false;
    if (difficulty && recipe.difficulty !== difficulty) return false;
    return true;
  });

  const listHtml = recipes.map(recipe => `
    <div class="recipe-card">
      <div class="recipe-card-image">${recipe.icon || '🍽️'}</div>
      <div class="recipe-card-body">
        <div class="recipe-card-title">${recipe.name}</div>
      </div>
    </div>
  `).join('');

  document.getElementById('adv-search-results').innerHTML = listHtml || '<p>未找到匹配的菜谱</p>';
}

这段代码展示了高级搜索的核心逻辑：先读取表单值，再对本地全部菜谱数组进行过滤。与直接在 IndexedDB 中构造复杂查询相比，这种在内存中过滤的方式更直观且易于调试，尤其适合数据量不算特别大的单机家庭应用。开发者可以在浏览器中直接调试过滤逻辑，确保每个条件组合的行为符合预期。

🔌 将搜索条件同步到鸿蒙原生（ArkTS 片段）

// entry/src/main/ets/plugins/AdvancedSearchPlugin.ets
import plugin from '@ohos.plugin';

export interface SearchCondition {
  name: string;
  category: string;
  difficulty: string;
}

@plugin
export default class AdvancedSearchPlugin {
  async saveCondition(cond: SearchCondition): Promise<void> {
    // 示例：可以把常用搜索条件保存到首选项或分布式数据
    console.info('save advanced condition: ' + JSON.stringify(cond));
  }
}

在 ArkTS 原生侧，我们定义了一个 AdvancedSearchPlugin，通过 saveCondition 方法接收 Web 层提交的搜索条件对象。这里使用了明确的 SearchCondition 接口，使类型信息更加清晰。真实项目中可以根据需要把这些条件写入鸿蒙首选项，或同步到分布式数据服务，为多设备间共享「常用高级搜索」提供支持。

function saveAdvancedConditionNative(condition) {
  if (!window.cordova) return;
  cordova.exec(null, null, 'AdvancedSearchPlugin', 'saveCondition', [condition]);
}

在 Web 层，我们封装一个 saveAdvancedConditionNative 函数，在用户点击「保存为常用条件」按钮时调用它。函数会通过 cordova.exec 把条件对象发送给 ArkTS 插件。由于传入的是普通 JSON 对象，Cordova 桥会自动完成序列化和反序列化，开发者无需关心底层细节。

📝 小结

高级搜索页面通过多条件组合筛选，为家庭成员提供了比全文搜索更精确的查找方式。依托 Cordova&OpenHarmony 混合架构，我们在 Web 层实现了所有表单和过滤逻辑，同时通过 ArkTS 插件将常用搜索条件持久化到鸿蒙环境中，实现了「本地灵活搜索 + 原生条件同步」的双重能力。这样的设计既保证了前端开发效率，又为跨设备体验预留了空间。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net