Need search list as popover in ionic 3 - html

Question

This is my html code
<ion-searchbar [(ngModel)]="data" placeholder="Airlines" (ionInput)="getAirlines($event)">
</ion-searchbar>
<ion-list *ngIf="data">
<ion-item *ngFor="let item of airlines" (click)="airlinesClicked($event, item)">
<button ion-button item-start clear style="margin-right:2%; width:10%;height:10%" no-padding>
<img no-padding src="{{item.logo}}">
</button>
{{item.name}}
</ion-item>
</ion-list>
Iam trying to get searched result as list by filtering by each letters. While i am searching my list pushing my below contents down in my page. So i like to get my item as popover. Can anyone help me to get my result......
Thanks in advance

Answer 1

I'm not pretty sure but maybe when the data is ready you can create a popover controller and the resize the page.
import { PopoverController } from 'ionic-angular';
#Component({})
class yourClassName {
constructor(public PopOverCtrl: PopoverController) {}
presentPopover(event) {
let popover = this.popoverCtrl.create(ListPage);
popover.present({
ev: event
});
}
}
more details on Ionic website

Answer 2

You can use bootstrap for the following class tags
and create a custom list popover on ion-searchbar
<ion-row>
<ion-searchbar
(ionChange)="getAirlines($event)"
[(ngModel)]="data" placeholder="Airlines"
></ion-searchbar>
</ion-row>
<ion-row>
<ul
class="list-group position-absolute px-2 search-list w-100 rounded-2 shadow-sm"
*ngIf="data">
<li
*ngFor="let item of airlines"
class="list-group-item"
(click)="airlinesClicked($event,item)">
{{item.name}}
</li>
</ul>
</ion-row>
-----css
.search-list{
z-index: 9;
max-height: 150px;
overflow-y: auto;
}