如何在 Search 组件中实现输入内容的实时搜索？

Question

我在用鸿蒙的 Search 组件实现一个实时搜索功能，就是用户输入的时候，我想要立即去请求后台并更新搜索结果，但不确定如何绑定输入事件来实现这个。有没有类似实现的代码示例？谢谢大家的帮助！

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

可以通过 Search 组件的 onChange 事件来监听用户的输入，结合 JavaScript 实现实时搜索请求和结果更新。

export default {
  data: {
    searchText: '',
    searchResults: []
  },
  onSearchChange(event) {
    this.searchText = event.value;
    this.searchResults = this.searchFromBackend(this.searchText);
  },
  searchFromBackend(query) {
    // 模拟从后台搜索
    return query ? [`结果1：${query}`, `结果2：${query}`] : [];
  }
}

<Search onChange="onSearchChange" placeholder="请输入搜索内容"></Search>
<List>
  <ListItem for="{{result in searchResults}}" key="{{result}}">{{result}}</ListItem>
</List>

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。