Question

我正在尝试重新创建一个离子搜索栏，以搜索我的应用程序中来自Cloud Firestore的所有事件。我已经阅读了很多有关此的内容，但我不了解搜索栏的工作原理。有人可以帮我吗？

我想做的是，当搜索栏没有对准焦点时，一切正常，但是当您单击搜索栏并输入内容时，您会在搜索栏下方得到类似覆盖的内容，其中列出了所有已发现的事件，并且那么当您取消操作时，您只会再次看到正常页面。

This is when it's focused but there's no input

编辑：好的，我已经设法根据输入内容隐藏和显示所有内容，但是过滤功能没有做任何明显的事情。...

getItems(ev: any) {

    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    const val = ev.target.value;
    if (val && val.trim() != '') {
      this.showList = true;
      this.items = this.items.filter((item) => {
        return (item.title.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    } else {
      this.showList = false;
    }
  }

这可能是什么？

Answer 1

Searchbar文档提供了一个基本示例，并在getItems中提供了过滤实现：

https://ionicframework.com/docs/components/#searchbar

您有什么问题？

Answer 2

如果我对您的理解正确，那么您想隐藏显示“ La Cantina的新图片”的图像，并且在搜索栏中键入某些内容时仅显示搜索结果吗？您可以使用ngIf伪指令并为其分配用于存储搜索词的变量，并在其上应用NOT运算符，以便DIV仅在搜索变量为空时显示。

示例：

<div *ngIf="!searchVariable">Stuff you want hidden when the search term is typed</div>

Ionic 3 SearchBar组件

2 个答案: