HarmonyOS鸿蒙Next中使用@Watch + setTimeout实现带防抖的搜索建议功能

使用场景

针对于任何联想搜索相关的地方，比如商品搜索、通讯录联系人查找、文章标题检索、地点搜索等等

实现思路

一、防抖控制：用户停止输入多少秒后才出发搜索，防止抖动。

this.debounceTimer = setTimeout(() => {
  this.fetchSuggestions(this.searchText.trim());
}, 300); // 300ms 防抖

二、缓存管理：使用 Map<string, string[]> 缓存相关数据列表。

  private cache: Map<string, string[]> = new Map(); // 本地缓存
   if (this.cache.has(keyword)) {
      this.suggestions = this.cache.get(keyword)!;
      return;
    }

三、使用 @State 管理状态且通过 @Watch('searchText') 来监听输入变化。

 @Watch('onSearchTextChanged')
  @State searchText: string = '';
  @State suggestions: string[] = [];
  @State isLoading: boolean = false;

完整可运行代码

@Entry
@Component
struct SearchPage {
  @Watch('onSearchTextChanged')
  @State searchText: string = '';
  @State suggestions: string[] = [];
  @State isLoading: boolean = false;

  private debounceTimer: number = 0;
  private cache: Map<string, string[]> = new Map(); // 本地缓存

  // 监听搜索框输入

  private onSearchTextChanged(newVal: string) {
    console.log(this.searchText)
    if (this.searchText.trim() === '') {
      this.suggestions = [];
      return;
    }

    // 清除上一次定时器
    clearTimeout(this.debounceTimer);

    // 设置新防抖
    this.debounceTimer = setTimeout(() => {
      this.fetchSuggestions(this.searchText.trim());
    }, 300); // 300ms 防抖
  }

  // 模拟网络请求（实际项目替换为 fetch 或 ohos.request）
  private async mockApiRequest(keyword: string): Promise<string[]> {
    // 模拟网络延迟
    // await new Promise(resolve => setTimeout(resolve, 500));

    // 返回模拟建议（实际应调用后端接口）
    const base = ['shouji', 'diannao', 'erji', 'pingban', 'shoubiao'];
    return base.filter(item => item.includes(keyword)).slice(0, 5);
  }

  private async fetchSuggestions(keyword: string) {
    // 1. 先查缓存
    if (this.cache.has(keyword)) {
      this.suggestions = this.cache.get(keyword)!;
      return;
    }

    // 2. 缓存未命中，发起请求
    this.isLoading = true;
    try {
      const result = await this.mockApiRequest(keyword);
      this.suggestions = result;

      // 3. 写入缓存
      this.cache.set(keyword, result);
    } catch (e) {
      console.error('[Search] 请求失败:', e);
      this.suggestions = ['网络错误，请重试'];
    } finally {
      this.isLoading = false;
    }
  }

  build() {
    Column({ space: 15 }) {
      Text('商品搜索')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      // 搜索框
      TextInput({ placeholder: '请输入商品名称' })
        .onChange((value: string) => {
          this.searchText = value; // 触发 @Watch
        })
        .width('100%')
        .height(50)
        .borderRadius(8)
        .backgroundColor('#F5F5F5')

      // 加载状态
      if (this.isLoading && this.searchText.trim() !== '') {
        Text('搜索中...')
          .fontColor('#999')
          .fontSize(14)
      }

      // 建议列表
      if (this.suggestions.length > 0) {
        List({ space: 5 }) {
          ForEach(
            this.suggestions,
            (item: string, index: number) => {
              ListItem() {
                Row() {
                  Image($r('app.media.startIcon'))
                    .width(16)
                    .height(16)
                    .margin({ right: 10 })
                  Text(item)
                    .fontSize(16)
                }
                .padding(12)
                .width('100%')
                .borderRadius(6)
                .backgroundColor('#FAFAFA')
              }
            }
          )
        }
        .width('100%')
        .height(200)
      }
    }
    .padding(25)
    .width('100%')
  }
}

实现效果图

通过搜索shouji可联想带出相关的数据。