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

📌 概述

高级搜索功能提供了更强大的搜索能力，用户可以通过多个条件组合进行精确搜索。高级搜索支持按日期范围、花费范围、目的地、标签等多个条件进行搜索。这个功能满足了用户对特定旅行的精确查找需求。在 Cordova 与 OpenHarmony 的混合开发框架中，高级搜索需要实现复杂的查询逻辑和原生层的性能优化。

🔗 完整流程

第一步：高级搜索条件设计与验证

高级搜索需要支持多个搜索条件，包括日期范围、花费范围、目的地、标签、同行者等。这些条件需要进行验证，确保数据的有效性。搜索条件可以保存为搜索模板，用户可以快速重用。

第二步：复杂查询逻辑实现

高级搜索需要实现复杂的查询逻辑，支持多个条件的组合。查询逻辑需要高效，避免全表扫描。可以使用数据库索引来优化查询性能。

第三步：原生层查询优化与结果缓存

OpenHarmony 原生层可以实现查询的优化和结果缓存。原生层可以预编译查询语句，提高查询效率。原生层还可以缓存常用的查询结果。

🔧 Web 代码实现

高级搜索页面 HTML 结构

<div id="advanced-search-page" class="page">
    <div class="page-header">
        <h1>高级搜索</h1>
    </div>
    
    <div class="advanced-search-container">
        <form id="advancedSearchForm" class="search-form">
            <div class="form-group">
                <label>目的地</label>
                <input type="text" name="destination" placeholder="输入目的地...">
            </div>
            
            <div class="form-group">
                <label>开始日期</label>
                <input type="date" name="startDate">
            </div>
            
            <div class="form-group">
                <label>结束日期</label>
                <input type="date" name="endDate">
            </div>
            
            <div class="form-group">
                <label>最小花费</label>
                <input type="number" name="minExpense" placeholder="0">
            </div>
            
            <div class="form-group">
                <label>最大花费</label>
                <input type="number" name="maxExpense" placeholder="999999">
            </div>
            
            <div class="form-group">
                <label>标签</label>
                <select name="tags" multiple>
                    <!-- 标签选项动态加载 -->
                </select>
            </div>
            
            <div class="form-actions">
                <button type="button" class="btn btn-primary" onclick="performAdvancedSearch()">
                    搜索
                </button>
                <button type="button" class="btn btn-secondary" onclick="resetSearchForm()">
                    重置
                </button>
            </div>
        </form>
        
        <div class="search-results" id="advancedSearchResults">
            <!-- 搜索结果动态加载 -->
        </div>
    </div>
</div>

HTML 结构包含多个搜索条件输入框和搜索结果展示区域。

执行高级搜索函数

async function performAdvancedSearch() {
    try {
        // 获取表单数据
        const form = document.getElementById('advancedSearchForm');
        const formData = new FormData(form);
        
        const searchCriteria = {
            destination: formData.get('destination'),
            startDate: formData.get('startDate'),
            endDate: formData.get('endDate'),
            minExpense: parseInt(formData.get('minExpense')) || 0,
            maxExpense: parseInt(formData.get('maxExpense')) || Infinity,
            tags: formData.getAll('tags')
        };
        
        // 从数据库查询所有旅行
        const allTrips = await db.getAllTrips();
        
        // 执行高级搜索
        const results = filterTrips(allTrips, searchCriteria);
        
        // 渲染搜索结果
        renderAdvancedSearchResults(results);
        
        // 通知原生层
        if (window.cordova) {
            cordova.exec(
                (result) => console.log('Advanced search performed:', result),
                (error) => console.error('Search error:', error),
                'AdvancedSearchPlugin',
                'onAdvancedSearchPerformed',
                [{ criteria: searchCriteria, resultCount: results.length, timestamp: Date.now() }]
            );
        }
    } catch (error) {
        console.error('Error performing advanced search:', error);
        showToast('搜索失败');
    }
}

执行高级搜索函数收集表单数据，然后执行搜索操作。performAdvancedSearch 函数是高级搜索的核心执行函数。函数首先获取高级搜索表单中的所有数据，包括目的地、日期范围、花费范围和标签。然后将这些数据组织成一个搜索条件对象。接着从数据库获取所有旅行数据，调用 filterTrips 函数根据搜索条件进行过滤。搜索完成后，函数渲染搜索结果，并通过 Cordova 插件通知原生层进行相应的处理。这个函数支持多条件组合搜索，用户可以根据多个维度精确查找旅行记录。

高级过滤函数

function filterTrips(trips, criteria) {
    return trips.filter(trip => {
        // 目的地过滤
        if (criteria.destination && !trip.destination.includes(criteria.destination)) {
            return false;
        }
        
        // 日期范围过滤
        if (criteria.startDate) {
            const tripStartDate = new Date(trip.startDate);
            const filterStartDate = new Date(criteria.startDate);
            if (tripStartDate < filterStartDate) {
                return false;
            }
        }
        
        if (criteria.endDate) {
            const tripEndDate = new Date(trip.endDate);
            const filterEndDate = new Date(criteria.endDate);
            if (tripEndDate > filterEndDate) {
                return false;
            }
        }
        
        // 花费范围过滤
        if (trip.expense < criteria.minExpense || trip.expense > criteria.maxExpense) {
            return false;
        }
        
        // 标签过滤
        if (criteria.tags.length > 0) {
            const hasAllTags = criteria.tags.every(tag => 
                trip.tags && trip.tags.includes(tag)
            );
            if (!hasAllTags) {
                return false;
            }
        }
        
        return true;
    });
}

高级过滤函数根据多个条件对旅行列表进行过滤。filterTrips 函数实现了高级搜索的核心过滤逻辑。函数使用 filter 方法遍历所有旅行，根据搜索条件进行多维度的过滤。首先检查目的地是否匹配，如果指定了目的地但旅行的目的地不包含该关键词，则排除该旅行。然后检查日期范围，旅行的开始日期必须不早于过滤条件的开始日期，结束日期必须不晚于过滤条件的结束日期。接着检查花费范围，旅行的花费必须在指定的范围内。最后检查标签，如果指定了标签，旅行必须包含所有指定的标签。这种设计提供了灵活的多条件组合搜索能力，用户可以根据多个维度精确查找旅行记录。

搜索结果渲染函数

function renderAdvancedSearchResults(results) {
    const container = document.getElementById('advancedSearchResults');
    container.innerHTML = '';
    
    if (results.length === 0) {
        container.innerHTML = '<p class="no-results">未找到匹配的旅行</p>';
        return;
    }
    
    const resultSummary = document.createElement('div');
    resultSummary.className = 'result-summary';
    resultSummary.innerHTML = `
        <p>找到 <strong>${results.length}</strong> 条旅行记录</p>
        <p>总花费: <strong>¥${results.reduce((sum, t) => sum + (t.expense || 0), 0)}</strong></p>
    `;
    container.appendChild(resultSummary);
    
    results.forEach(trip => {
        const resultElement = document.createElement('div');
        resultElement.className = 'search-result-item';
        resultElement.innerHTML = `
            <div class="result-header">
                <h3>${trip.destination}</h3>
                <span class="result-date">${formatDate(trip.startDate)} - ${formatDate(trip.endDate)}</span>
            </div>
            <div class="result-body">
                <p class="result-description">${trip.description || '暂无描述'}</p>
                <div class="result-stats">
                    <span>💰 ¥${trip.expense}</span>
                    <span>👥 ${trip.companions || '独自旅行'}</span>
                </div>
            </div>
            <div class="result-footer">
                <button class="btn-small" onclick="navigateTo('trip-detail', ${trip.id})">
                    查看详情
                </button>
            </div>
        `;
        container.appendChild(resultElement);
    });
}

搜索结果渲染函数展示搜索结果和统计信息。renderAdvancedSearchResults 函数负责将高级搜索结果渲染到页面上。函数首先清空结果容器，然后检查是否有搜索结果。如果没有结果，显示"未找到匹配的旅行"的提示信息。如果有结果，首先显示一个结果摘要，包括找到的旅行数量和总花费。这个摘要提供了快速的统计信息，帮助用户了解搜索结果的概况。然后遍历结果数组，为每个旅行创建一个结果卡片。每个卡片包含旅行的目的地、日期范围、描述、花费和同行者信息。这种设计提供了详细的搜索结果展示，用户可以快速浏览搜索结果并选择感兴趣的旅行。

重置搜索表单函数

function resetSearchForm() {
    const form = document.getElementById('advancedSearchForm');
    form.reset();
    document.getElementById('advancedSearchResults').innerHTML = '';
}

重置函数清空表单和搜索结果。resetSearchForm 函数提供了重置高级搜索表单的功能。函数首先调用 form.reset() 方法清空表单中的所有输入值，将所有字段恢复到初始状态。然后清空搜索结果容器，移除之前的搜索结果。这个函数提供了一个简单的方式让用户重新开始搜索，无需手动清空每个字段。

🔌 OpenHarmony 原生代码实现

高级搜索优化插件

// AdvancedSearchPlugin.ets
import { BusinessError } from '@ohos.base';

export class AdvancedSearchPlugin {
    private queryCache: Map<string, any> = new Map();
    
    // 处理高级搜索事件
    onAdvancedSearchPerformed(args: any, callback: Function): void {
        try {
            const criteria = args[0].criteria;
            const resultCount = args[0].resultCount;
            const timestamp = args[0].timestamp;
            
            // 生成缓存键
            const cacheKey = JSON.stringify(criteria);
            
            // 缓存搜索结果
            this.queryCache.set(cacheKey, {
                resultCount: resultCount,
                timestamp: timestamp
            });
            
            console.log(`[AdvancedSearch] Results: ${resultCount}`);
            
            callback({ success: true, message: '高级搜索已执行' });
        } catch (error) {
            callback({ success: false, error: error.message });
        }
    }
    
    // 获取查询缓存
    getQueryCache(args: any, callback: Function): void {
        try {
            const criteria = args[0].criteria;
            const cacheKey = JSON.stringify(criteria);
            const cacheEntry = this.queryCache.get(cacheKey);
            
            if (cacheEntry) {
                callback({ success: true, data: cacheEntry });
            } else {
                callback({ success: false, data: null });
            }
        } catch (error) {
            callback({ success: false, error: error.message });
        }
    }
}

高级搜索优化插件在原生层缓存查询结果，提高搜索性能。AdvancedSearchPlugin 是 OpenHarmony 原生层的高级搜索管理插件，负责处理与高级搜索相关的原生操作。插件维护了一个查询缓存 Map，用于存储最近执行的高级搜索查询和结果数量。通过将搜索条件序列化为 JSON 字符串作为缓存键，可以精确匹配相同的搜索条件。onAdvancedSearchPerformed 方法处理高级搜索事件，当用户执行高级搜索时，将搜索条件和结果数量缓存起来。getQueryCache 方法提供了获取缓存数据的接口，检查是否存在相同条件的缓存。通过这个插件，Web 层可以充分利用原生层的缓存机制，避免重复的复杂查询操作，显著提高搜索性能。

📝 总结

高级搜索功能展示了如何在 Cordova 与 OpenHarmony 框架中实现一个强大的搜索系统。Web 层负责搜索 UI 和复杂的过滤逻辑，原生层负责查询优化和结果缓存。通过高级搜索，用户可以精确查找特定的旅行记录。