如何结合 Search 和 Select 组件做一个搜索过滤器？

Question

我想做一个商品搜索过滤器，用 Search 组件输入搜索关键词，然后用 Select 组件选择过滤条件，比如价格区间和类别，不知道该怎么把这两个组件结合起来实现过滤功能。有谁有经验可以分享一下实现方法和代码吗？

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

Answer 1

可以通过 Search 组件来搜索关键词，Select 组件来选择筛选条件，然后组合这两个条件去请求数据并更新结果。

export default {
  data: {
    searchText: '',
    filterOptions: ['全部', '价格升序', '价格降序'],
    selectedFilter: '全部'
  },
  onSearchChange(event) {
    this.searchText = event.value;
    this.updateResults();
  },
  onFilterChange(index) {
    this.selectedFilter = this.filterOptions[index];
    this.updateResults();
  },
  updateResults() {
    // 根据 searchText 和 selectedFilter 更新结果
  }
}

<Search onChange="onSearchChange" placeholder="输入关键词"></Search>
<Select range="{{filterOptions}}" onChange="onFilterChange"></Select>

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