Question

我正在使用Ionic应用程序，并且已在Ionic应用程序中添加了一个搜索栏，但问题是，当我单击搜索结果之外时，搜索栏应隐藏但没有隐藏并且结果也在那里。

我希望当用户在搜索栏之外单击时，它应该隐藏搜索栏，并且还应该清除结果。

这是我的 app.html ：

  <ion-navbar>
    <button ion-button menuToggle start>
      <ion-icon name="menu"></ion-icon>
    </button>
    <div class="mydiv2">
      <ion-icon name="search" class="myicon22" (click)="hasSearchnot()"></ion-icon>
    </div>
  </ion-navbar>
  <ion-searchbar *ngIf="HasSearch" (input)="setSearchProducts($event)"></ion-searchbar>
  <ion-list *ngIf="HasSearch">
    <ion-item *ngFor="let item of finalproductsearch" (click)="showProductDetails(item)">
      <ion-thumbnail item-start>
        <img src="{{'images.pro_images}}">
      </ion-thumbnail>
      {{ item.product_name }}
    </ion-item>
  </ion-list>

在此视图中，我有一个搜索图标，当用户单击搜索图标时，搜索栏将打开。

这是我的 app.component.ts ：

HasSearch: boolean;
hasSearchnot()
{
    this.HasSearch = !this.HasSearch;
}

getsearchproducts()
{
    this.restProvider.getproductsforsearch()
      .then(data => {
      this.searchproduct = data;
      this.finalseaproduct = this.searchproduct.msg;
      });
}

我的搜索结果显示良好，但是问题是，当我单击搜索结果之外时，它应该关闭搜索栏并清除搜索结果，但这没有发生。

当我移至下一页时，以前的搜索结果仍然存在。当用户移至下一页时，我想清除搜索结果。

非常感谢您的帮助。

Answer 1

此代码可根据您的要求正常运行，请尝试以下操作：

app.html：

<ion-navbar (click)="hideSearchbar($event)" >
  <button ion-button menuToggle start>
    <ion-icon name="menu"></ion-icon>
  </button>
  <div class="mydiv2">
    <ion-icon name="search" class="myicon22" (click)="hasSearchnot($event)"></ion-icon>
  </div>
</ion-navbar>
<ion-searchbar *ngIf="HasSearch" (input)="setSearchProducts($event)"></ion-searchbar>
<ion-content  (click)="hideSearchbar($event)">
<ion-list *ngIf="HasSearch">
  <ion-item *ngFor="let item of finalproductsearch" (click)="showProductDetails(item)">
    <ion-thumbnail item-start>
      <img src="{{'images.pro_images}}">
    </ion-thumbnail>
    {{ item.product_name }}
  </ion-item>
</ion-list>
</ion-content>

app.component.ts：

HasSearch: boolean;
  hasSearchnot(e) {
    console.log("hasearch searchbar", this.HasSearch);

    if(e.target.classList.contains('myicon22')){
          this.finalsearchproduct = " ";    
      this.HasSearch = !this.HasSearch;

    }
  }
  hideSearchbar(e) {
    if(!e.target.classList.contains('myicon22')){

    if (this.HasSearch == true) {
      this.HasSearch = false;
      this.finalsearchproduct = " ";
    }
  }
  }
  getSearchProducts() {
    this.restProvider.getproductsforsearch()
      .then(data => {
      this.searchproduct = data;
      this.finalseaproduct = this.searchproduct.msg;
      });
  }

在这里我已经使用过 e.target.classList.contains（'myicon22'），这将返回true或false，这取决于特定标记是否将“ myicon22”作为子类，并且使用这种逻辑，当用户单击搜索栏之外的某个地方时，我们可以隐藏搜索栏。

谢谢。

当用户在Ionic的搜索栏之外单击时，无法隐藏搜索

1 个答案: