如何让我的离子搜索栏（离子输入）粘在Ionic的顶部导航栏上？

Question

我的html表单显示了一个来自JSON API的列表和一个用于过滤列表的搜索输入框。

我希望这个搜索在顶部是粘性的。下面是我的task.html代码。

<!--
  Generated template for the TaskgivenPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>taskgiven</ion-title>

  </ion-navbar>

</ion-header>



<ion-content padding>
  <ion-searchbar (ionInput)="getItems($event)" style="width:400px; float:right;  "></ion-searchbar>
  <ion-list  *ngFor="let list of displayList;">

    <ion-item class="desc" (click)="ind(list)" >{{list.TASKDESC}}  <br>
      <p style="color:#d2dce1; margin-top:10px" >{{list.PRIMARY}}</p>
      <p style="text-align:right; margin-top:-20px;" [style.color]="list.ENTDT > list.DEADLINE_DT ? 'red' : '#d2dce1'">{{list.DEADLINE_DT}}</p><hr>

    </ion-item>


    <!--<ion-item class="desc1" >{{list.PRIMARY}}</ion-item>-->
  </ion-list>

</ion-content>

我希望<ion-searchbar (ionInput)="getItems($event)" style="width:400px; float:right; "></ion-searchbar>在上面粘

Answer 1

只需将搜索栏放在ion-header中即可。 You can find the working version here

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
    <ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredItems()"></ion-searchbar>
  </ion-navbar>
</ion-header>