HarmonyOS 鸿蒙Next中如何使用Search组件实现搜索功能？如何保存搜索历史？

在HarmonyOS Next中，使用Search组件实现搜索功能并保存历史记录，可以按以下步骤操作：

1. 使用Search组件

Search是ArkUI的基础组件，用于创建搜索框。基本用法如下：

@Entry
@Component
struct SearchExample {
  @State searchText: string = ''

  build() {
    Column() {
      Search({
        placeholder: '请输入关键词',
        controller: this.searchController
      })
      .onChange((value: string) => {
        this.searchText = value
      })
      .onSubmit((value: string) => {
        // 处理搜索提交
        this.performSearch(value)
      })
      .width('100%')
    }
  }

  performSearch(keyword: string) {
    // 执行搜索逻辑
    console.log(`搜索关键词: ${keyword}`)
  }
}

2. 保存搜索历史

建议使用轻量级存储（Preferences）保存搜索历史：

import preferences from '@ohos.data.preferences'

class SearchHistoryManager {
  private static readonly KEY_HISTORY = 'search_history'
  private static readonly MAX_HISTORY = 10

  // 保存搜索记录
  static async saveSearchKeyword(keyword: string): Promise<void> {
    try {
      const prefs = await preferences.getPreferences(this.getContext(), 'search_history')
      let history = await prefs.get(this.KEY_HISTORY, '[]')
      let historyArray = JSON.parse(history)
      
      // 去重并限制数量
      historyArray = historyArray.filter((item: string) => item !== keyword)
      historyArray.unshift(keyword)
      historyArray = historyArray.slice(0, this.MAX_HISTORY)
      
      await prefs.put(this.KEY_HISTORY, JSON.stringify(historyArray))
      await prefs.flush()
    } catch (error) {
      console.error('保存搜索历史失败:', error)
    }
  }

  // 获取搜索历史
  static async getSearchHistory(): Promise<string[]> {
    try {
      const prefs = await preferences.getPreferences(this.getContext(), 'search_history')
      const history = await prefs.get(this.KEY_HISTORY, '[]')
      return JSON.parse(history)
    } catch (error) {
      console.error('获取搜索历史失败:', error)
      return []
    }
  }

  // 清空搜索历史
  static async clearSearchHistory(): Promise<void> {
    try {
      const prefs = await preferences.getPreferences(this.getContext(), 'search_history')
      await prefs.delete(this.KEY_HISTORY)
      await prefs.flush()
    } catch (error) {
      console.error('清空搜索历史失败:', error)
    }
  }
}

3. 显示搜索历史

在Search组件下方显示历史记录列表：

@Component
struct SearchHistoryList {
  @State historyList: string[] = []

  build() {
    Column() {
      if (this.historyList.length > 0) {
        List() {
          ForEach(this.historyList, (item: string) => {
            ListItem() {
              Text(item)
                .fontSize(16)
                .padding(10)
            }
            .onClick(() => {
              // 点击历史记录重新搜索
              this.onHistoryItemClick(item)
            })
          })
        }
      } else {
        Text('暂无搜索历史')
          .fontSize(14)
          .fontColor(Color.Gray)
      }
    }
  }

  // 加载历史记录
  async aboutToAppear() {
    this.historyList = await SearchHistoryManager.getSearchHistory()
  }
}

4. 完整集成示例

@Entry
@Component
struct SearchPage {
  @State searchText: string = ''
  @State searchHistory: string[] = []
  private searchController: SearchController = new SearchController()

  build() {
    Column() {
      // 搜索框
      Search({
        placeholder: '搜索...',
        controller: this.searchController
      })
      .onChange((value: string) => {
        this.searchText = value
      })
      .onSubmit(async (value: string) => {
        if (value.trim()) {
          await SearchHistoryManager.saveSearchKeyword(value)
          await this.loadSearchHistory()
          this.performSearch(value)
        }
      })

      // 历史记录
      SearchHistoryList({ historyList: this.searchHistory })
    }
  }

  async loadSearchHistory() {
    this.searchHistory = await SearchHistoryManager.getSearchHistory()
  }

  async aboutToAppear() {
    await this.loadSearchHistory()
  }
}

关键点说明：

1. Search组件事件：onChange监听输入变化，onSubmit处理搜索提交
2. 数据存储：使用Preferences持久化存储，适合保存少量历史数据
3. 历史记录管理：限制记录数量，避免重复，新的记录放在前面
4. 性能考虑：历史记录数量建议控制在10-20条以内

这样实现后，用户每次搜索时会自动保存记录，并在下次打开搜索页面时显示历史记录。点击历史记录可以快速重新搜索。