时间戳

首页 > 解决方案 > 通过离子搜索栏进行手风琴式下拉过滤

ionic-framework - 通过离子搜索栏进行手风琴式下拉过滤

问题描述

嗨，我刚刚按照教程博客链接创建了离子手风琴下拉菜单，该链接使用小部件创建手风琴下拉菜单，下面是该博客的链接。

http://masteringionic.com/blog/2019-01-27-creating-a-simple-accordion-widget-in-ionic-4/

更新：这是我的项目演示链接https://stackblitz.com/github/dSaif/search-accordion 一切正常，但我想在手风琴顶部添加 Ion-searchbar 以便通过输入过滤下拉列表文本。

请帮助我，我该怎么做。谢谢你。

标签： ionic-framework

解决方案

您将不得不在主页中创建一个变量来存储过滤结果。然后你需要有一个过滤功能，它将从搜索栏中获取输入并过滤你的主列表。请记住，您不应将新变量设置为主列表，这可能会由于对象引用而导致问题。

所以你应该有类似的东西

在你的 html

<ion-searchbar placeholder="Search a name." [(ngModel)]="searchValue" (ionChange)="filterList()"></ion-searchbar>

在你的 ts 文件中

searchValue: string = '';
filteredList: Array<{ name: string, description: string, image: string }> = this.technologies;

// function called in the html whenever you change the ion searchbar value
private filterList(){
  //Make a variable so as to avoid any flashing on the screen if you set it to an empty array
  const localFilteredList = []
  this.technologies.forEach(currentItem => {
      //here goes your search criteria, in the if statement
      if(currentItem.name && currentItem.name.toLowerCase().includes(this.searchValue.toLowerCase())) {
          localFilteredList.push(currentItem);
      }
  });
  //finally set the global filter list to your newly filtered list
  this.filteredList  = localFilteredList;
}

您还需要确保引用 filterList 变量而不是当前引用的变量。

推荐阅读