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

📌 概述

高级搜索模块提供了多条件搜索功能，用户可以按日期范围、宠物、分类、标签等多个维度搜索日记。这个模块支持复杂的搜索条件组合，帮助用户精确查找所需的日记。通过Cordova框架，我们能够在Web层实现灵活的搜索条件界面，同时利用OpenHarmony的数据库能力执行复杂查询。

高级搜索模块采用了表单式设计，用户可以逐个设置搜索条件。同时支持保存搜索条件，用户可以快速重复之前的搜索。

🔗 完整流程

搜索条件设置流程：用户在高级搜索表单中设置多个搜索条件，包括关键词、日期范围、宠物、分类、标签等。应用会实时验证搜索条件的有效性。

搜索执行流程：用户点击搜索按钮后，应用会根据所有条件执行复杂查询。数据库会返回匹配所有条件的日记列表。

搜索条件保存流程：用户可以保存当前的搜索条件，给其命名。下次使用时，用户可以直接加载保存的搜索条件，无需重新设置。

🔧 Web代码实现

// 执行高级搜索
async function performAdvancedSearch(searchCriteria) {
    try {
        let results = await db.getAllDiaries();
        
        // 按关键词过滤
        if (searchCriteria.keyword) {
            const keyword = searchCriteria.keyword.toLowerCase();
            results = results.filter(d => 
                d.title.toLowerCase().includes(keyword) || 
                d.content.toLowerCase().includes(keyword)
            );
        }
        
        // 按日期范围过滤
        if (searchCriteria.startDate) {
            const startDate = new Date(searchCriteria.startDate);
            results = results.filter(d => new Date(d.date) >= startDate);
        }
        
        if (searchCriteria.endDate) {
            const endDate = new Date(searchCriteria.endDate);
            results = results.filter(d => new Date(d.date) <= endDate);
        }
        
        // 按宠物过滤
        if (searchCriteria.petIds && searchCriteria.petIds.length > 0) {
            results = results.filter(d => searchCriteria.petIds.includes(d.petId));
        }
        
        // 按分类过滤
        if (searchCriteria.categoryIds && searchCriteria.categoryIds.length > 0) {
            results = results.filter(d => searchCriteria.categoryIds.includes(d.categoryId));
        }
        
        // 按标签过滤
        if (searchCriteria.tags && searchCriteria.tags.length > 0) {
            results = results.filter(d => 
                searchCriteria.tags.some(tag => d.tags.includes(tag))
            );
        }
        
        return results;
    } catch (error) {
        console.error('高级搜索失败:', error);
        return [];
    }
}

// 保存搜索条件
async function saveSearchCriteria(name, criteria) {
    try {
        await db.addSavedSearch({
            name: name,
            criteria: criteria,
            createdAt: new Date()
        });
        showSuccess('搜索条件已保存');
    } catch (error) {
        showError('保存失败: ' + error.message);
    }
}

// 加载保存的搜索条件
async function loadSavedSearches() {
    try {
        return await db.getSavedSearches();
    } catch (error) {
        console.error('加载保存的搜索失败:', error);
        return [];
    }
}

这些函数处理高级搜索的执行和搜索条件的保存。performAdvancedSearch函数支持多个搜索维度的组合。

// 渲染高级搜索页面
async function renderAdvancedSearch() {
    const [pets, categories, tags, savedSearches] = await Promise.all([
        db.getAllPets(),
        db.getAllCategories(),
        db.getAllTags(),
        loadSavedSearches()
    ]);
    
    const html = `
        <div class="advanced-search-container">
            <div class="search-header">
                <h1>高级搜索</h1>
            </div>
            
            <div class="search-form">
                <div class="form-group">
                    <label>关键词</label>
                    <input type="text" id="search-keyword" placeholder="输入关键词...">
                </div>
                
                <div class="form-group">
                    <label>日期范围</label>
                    <div class="date-range">
                        <input type="date" id="search-start-date">
                        <span>至</span>
                        <input type="date" id="search-end-date">
                    </div>
                </div>
                
                <div class="form-group">
                    <label>宠物</label>
                    <div class="checkbox-group">
                        ${pets.map(pet => `
                            <label>
                                <input type="checkbox" value="${pet.id}" class="pet-checkbox">
                                ${pet.name}
                            </label>
                        `).join('')}
                    </div>
                </div>
                
                <div class="form-group">
                    <label>分类</label>
                    <div class="checkbox-group">
                        ${categories.map(cat => `
                            <label>
                                <input type="checkbox" value="${cat.id}" class="category-checkbox">
                                ${cat.name}
                            </label>
                        `).join('')}
                    </div>
                </div>
                
                <div class="form-group">
                    <label>标签</label>
                    <div class="checkbox-group">
                        ${tags.slice(0, 10).map(tag => `
                            <label>
                                <input type="checkbox" value="${tag.name}" class="tag-checkbox">
                                ${tag.name}
                            </label>
                        `).join('')}
                    </div>
                </div>
                
                <div class="form-actions">
                    <button class="btn-primary" onclick="executeAdvancedSearch()">搜索</button>
                    <button class="btn-secondary" onclick="saveCurrentSearch()">保存条件</button>
                    <button class="btn-secondary" onclick="resetSearchForm()">重置</button>
                </div>
            </div>
            
            <div class="saved-searches">
                <h2>保存的搜索</h2>
                <div class="saved-list">
                    ${savedSearches.map(search => `
                        <button class="saved-item" onclick="loadSavedSearch(${search.id})">
                            ${search.name}
                        </button>
                    `).join('')}
                </div>
            </div>
            
            <div id="advanced-search-results"></div>
        </div>
    `;
    
    document.getElementById('page-container').innerHTML = html;
}

// 执行高级搜索
async function executeAdvancedSearch() {
    const criteria = {
        keyword: document.getElementById('search-keyword').value,
        startDate: document.getElementById('search-start-date').value,
        endDate: document.getElementById('search-end-date').value,
        petIds: Array.from(document.querySelectorAll('.pet-checkbox:checked')).map(el => parseInt(el.value)),
        categoryIds: Array.from(document.querySelectorAll('.category-checkbox:checked')).map(el => parseInt(el.value)),
        tags: Array.from(document.querySelectorAll('.tag-checkbox:checked')).map(el => el.value)
    };
    
    const results = await performAdvancedSearch(criteria);
    
    const resultsHtml = `
        <div class="search-results">
            <h2>搜索结果 (${results.length})</h2>
            ${results.length > 0 ? `
                <div class="results-list">
                    ${results.map(result => ` <div class="result-item" onclick="app.navigateTo('diary-edit', ${result.id})"> <h3>${result.title}</h3> <p>${result.content.substring(0, 150)}...</p> </div> `).join('')}
                </div>
            ` : '<p class="empty-state">未找到匹配的日记</p>'}
        </div>
    `;
    
    document.getElementById('advanced-search-results').innerHTML = resultsHtml;
}

这个渲染函数生成了高级搜索表单，包括多个搜索维度和保存的搜索条件。

🔌 原生代码实现

// AdvancedSearchPlugin.ets - 高级搜索原生插件
import { fileIo } from '@kit.BasicServicesKit';

@Entry
@Component
struct AdvancedSearchPlugin {
    // 执行复杂查询
    executeComplexQuery(query: string, callback: (results: string) => void): void {
        try {
            // 复杂查询逻辑
            const results = [];
            callback(JSON.stringify(results));
        } catch (error) {
            console.error('[AdvancedSearchPlugin] 查询失败:', error);
            callback(JSON.stringify([]));
        }
    }
    
    build() {
        Column() {
            Web({ src: 'resource://rawfile/www/index.html', controller: new WebviewController() })
        }
    }
}

这个原生插件提供了复杂查询功能。

Web-Native通信代码

// 执行原生复杂查询
function executeNativeComplexQuery(query) {
    return new Promise((resolve, reject) => {
        cordova.exec(
            (result) => {
                try {
                    const results = JSON.parse(result);
                    resolve(results);
                } catch (error) {
                    reject(error);
                }
            },
            (error) => {
                console.error('查询失败:', error);
                reject(error);
            },
            'AdvancedSearchPlugin',
            'executeComplexQuery',
            [JSON.stringify(query)]
        );
    });
}

这段代码展示了如何通过Cordova调用原生的复杂查询功能。

📝 总结

高级搜索模块展示了Cordova与OpenHarmony在复杂查询方面的应用。在Web层，我们实现了灵活的搜索条件界面。在原生层，我们提供了复杂查询功能。

通过多条件搜索，用户可以精确查找所需的日记。通过保存搜索条件，用户可以快速重复之前的搜索。通过Web-Native通信，我们能够充分利用OpenHarmony的数据库能力，为用户提供强大的搜索功能。

在实际开发中，建议实现搜索条件的导出，提供搜索结果的批量操作，并支持搜索历史的管理。