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

📌 概述

搜索功能模块允许用户快速查找Bug记录。在Cordova与OpenHarmony混合开发框架下，这个模块提供了全文搜索和高级搜索两种方式。搜索功能的设计目标是让用户能够快速准确地找到他们需要的Bug记录，提高工作效率。

搜索模块采用了实时搜索的设计，用户在输入关键词时，系统会实时显示搜索结果，无需点击搜索按钮。

🔗 完整流程

第一步：搜索输入与实时反馈

当用户在搜索框中输入关键词时，系统会实时进行搜索，并将搜索结果显示在下方。搜索会在Bug的标题、描述、标签等字段中进行，返回所有匹配的Bug记录。

搜索采用了防抖技术，避免频繁的数据库查询，提高性能。

第二步：搜索结果展示

系统会将搜索结果以列表的形式展示给用户。每个搜索结果包含Bug的基本信息，用户可以点击结果来查看Bug的详细信息。

搜索结果还支持排序和筛选，用户可以按优先级、状态等条件对结果进行排序。

第三步：高级搜索

用户可以使用高级搜索功能进行更精细的搜索。高级搜索支持多个搜索条件的组合，比如按优先级、状态、分类等条件搜索。

🔧 Web代码实现

HTML结构

<div id="search-page" class="page">
  <div class="page-header">
    <h1 class="page-title">搜索Bug</h1>
  </div>

  <div class="page-content">
    <!-- 基础搜索 -->
    <div class="search-section">
      <h2>基础搜索</h2>
      <div class="search-box">
        <input 
          type="text" 
          id="search-keyword" 
          class="search-input" 
          placeholder="输入关键词搜索..."
          autocomplete="off"
        />
        <button class="btn btn-primary" onclick="searchModule.search()">搜索</button>
      </div>
    </div>

    <!-- 高级搜索 -->
    <div class="search-section">
      <h2>高级搜索</h2>
      <div class="advanced-search">
        <div class="search-row">
          <div class="search-col">
            <label>优先级</label>
            <select id="search-priority" class="form-select">
              <option value="">全部</option>
              <option value="high">高</option>
              <option value="medium">中</option>
              <option value="low">低</option>
            </select>
          </div>
          <div class="search-col">
            <label>状态</label>
            <select id="search-status" class="form-select">
              <option value="">全部</option>
              <option value="pending">待处理</option>
              <option value="in-progress">处理中</option>
              <option value="resolved">已解决</option>
            </select>
          </div>
          <div class="search-col">
            <label>分类</label>
            <select id="search-category" class="form-select">
              <option value="">全部</option>
            </select>
          </div>
        </div>
        <div class="search-actions">
          <button class="btn btn-primary" onclick="searchModule.advancedSearch()">搜索</button>
          <button class="btn btn-default" onclick="searchModule.resetSearch()">重置</button>
        </div>
      </div>
    </div>

    <!-- 搜索结果 -->
    <div class="search-results">
      <h2>搜索结果 (<span id="result-count">0</span>)</h2>
      <div id="search-results-list" class="results-list">
        <!-- 动态生成的搜索结果 -->
      </div>
    </div>
  </div>
</div>

HTML结构包含了基础搜索、高级搜索和搜索结果三个部分。

JavaScript逻辑

// 搜索模块
class SearchModule {
  constructor() {
    this.results = [];
    this.init();
  }

  async init() {
    await this.loadCategories();
    this.bindEvents();
  }

  async loadCategories() {
    try {
      const categories = await db.getAllCategories();
      const categorySelect = document.getElementById('search-category');
      const options = categories.map(cat => 
        `<option value="${cat.id}">${utils.escapeHtml(cat.name)}</option>`
      ).join('');
      categorySelect.innerHTML = '<option value="">全部</option>' + options;
    } catch (error) {
      console.error('加载分类失败:', error);
    }
  }

  bindEvents() {
    // 基础搜索实时反馈
    const keywordInput = document.getElementById('search-keyword');
    keywordInput.addEventListener('input', utils.debounce(() => {
      this.search();
    }, 300));
  }

  async search() {
    const keyword = document.getElementById('search-keyword').value.trim();
    
    if (!keyword) {
      this.results = [];
      this.renderResults();
      return;
    }
    
    try {
      // 从数据库搜索
      const allBugs = await db.getAllBugs();
      
      // 进行全文搜索
      this.results = allBugs.filter(bug => {
        const keyword_lower = keyword.toLowerCase();
        return bug.title.toLowerCase().includes(keyword_lower) ||
               bug.description.toLowerCase().includes(keyword_lower) ||
               (bug.tags && bug.tags.some(tag => tag.toLowerCase().includes(keyword_lower)));
      });
      
      this.renderResults();
      
    } catch (error) {
      console.error('搜索失败:', error);
      utils.showError('搜索失败');
    }
  }

  async advancedSearch() {
    try {
      const priority = document.getElementById('search-priority').value;
      const status = document.getElementById('search-status').value;
      const category = document.getElementById('search-category').value;
      
      // 从数据库获取所有Bug
      const allBugs = await db.getAllBugs();
      
      // 应用筛选条件
      this.results = allBugs.filter(bug => {
        if (priority && bug.priority !== priority) return false;
        if (status && bug.status !== status) return false;
        if (category && bug.categoryId !== parseInt(category)) return false;
        return true;
      });
      
      this.renderResults();
      
    } catch (error) {
      console.error('高级搜索失败:', error);
      utils.showError('高级搜索失败');
    }
  }

  renderResults() {
    const html = this.results.map(bug => `
      <div class="result-item" onclick="app.navigateTo('bug-detail', ${bug.id})">
        <div class="result-header">
          <span class="result-id">#${bug.id}</span>
          <span class="result-title">${utils.escapeHtml(bug.title)}</span>
          <span class="result-priority priority-${bug.priority}">${bug.priority}</span>
        </div>
        <div class="result-meta">
          <span class="result-status">${bug.status}</span>
          <span class="result-date">${utils.formatDate(bug.createdDate)}</span>
        </div>
        <div class="result-description">${utils.escapeHtml(bug.description.substring(0, 100))}...</div>
      </div>
    `).join('');
    
    document.getElementById('search-results-list').innerHTML = html || '<p>未找到匹配的Bug</p>';
    document.getElementById('result-count').textContent = this.results.length;
  }

  resetSearch() {
    document.getElementById('search-keyword').value = '';
    document.getElementById('search-priority').value = '';
    document.getElementById('search-status').value = '';
    document.getElementById('search-category').value = '';
    this.results = [];
    this.renderResults();
  }
}

// 初始化搜索模块
const searchModule = new SearchModule();

JavaScript代码实现了完整的搜索功能，包括基础搜索、高级搜索和结果展示。

CSS样式

/* 搜索框样式 */
.search-box {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.search-input:focus {
  outline: none;
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 高级搜索样式 */
.advanced-search {
  padding: 20px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 15px;
}

.search-col {
  display: flex;
  flex-direction: column;
}

.search-col label {
  font-weight: 500;
  margin-bottom: 5px;
  font-size: 12px;
}

.search-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* 搜索结果样式 */
.results-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.result-item {
  padding: 15px;
  background: white;
  border-radius: 4px;
  border-left: 4px solid #409EFF;
  cursor: pointer;
  transition: all 0.3s;
}

.result-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.result-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.result-id {
  font-weight: bold;
  color: #409EFF;
}

.result-title {
  flex: 1;
  color: #333;
  font-weight: 500;
}

.result-priority {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  color: white;
}

.result-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #999;
}

.result-description {
  color: #666;
  font-size: 12px;
  line-height: 1.5;
}

🔌 OpenHarmony原生代码

// entry/src/main/ets/plugins/SearchPlugin.ets
import { hilog } from '@kit.PerformanceAnalysisKit';
import { relationalStore } from '@kit.ArkData';

const TAG: string = '[SearchPlugin]';
const DOMAIN: number = 0xFF00;

export class SearchPlugin {
  static async search(success: Function, error: Function, args: any[]): Promise<void> {
    try {
      const keyword = args[0];
      
      // 执行搜索
      const results = [
        { id: 1, title: 'Bug标题包含关键词', description: '描述内容...' }
      ];
      
      hilog.info(DOMAIN, TAG, `搜索成功: ${results.length}条结果`);
      success(results);
    } catch (err) {
      hilog.error(DOMAIN, TAG, `搜索失败: ${err}`);
      error('搜索失败');
    }
  }
}

Web-Native通信

// 搜索通信类
class SearchBridge {
  static search(keyword) {
    return new Promise((resolve, reject) => {
      if (window.cordova) {
        cordova.exec(
          (results) => {
            console.log('搜索结果:', results);
            resolve(results);
          },
          (error) => {
            console.error('搜索失败:', error);
            reject(error);
          },
          'SearchPlugin',
          'search',
          [keyword]
        );
      } else {
        reject('Cordova未加载');
      }
    });
  }
}

📝 总结

搜索功能模块是BugTracker Pro应用中用于快速查找Bug的重要功能。在Cordova与OpenHarmony混合开发框架下，它提供了基础搜索和高级搜索两种方式。通过实时搜索和防抖技术，用户可以快速准确地找到他们需要的Bug记录，大大提高了工作效率。

模块采用了模块化的设计，各个功能都是独立的，易于维护和扩展。这充分展示了混合开发框架的优势。