html header
<div class="autocomplete">
<ion-searchbar
[(ngModel)]="searchText"
(ionFocus)="addFocus()"
(ionInput)="search()"
(ionBlur)="removeFocus()"
debounce=500>
</ion-searchbar>
<ion-list>
<ion-item *ngFor="let res of refRicerca" (click)="addNote(res)">
{{res}}
</ion-item>
</ion-list>
</div>
css
.autocomplete {
width: 100%;
ion-searchbar {
padding: 1px !important;
}
ion-list {
position: absolute;
width: inherit;
overflow-y: scroll;
max-height: 150%;
z-index: 999;
ion-item {
img {
max-height: 2.5rem;
width: auto;
margin: auto;
display: block;
}
}
ion-item:hover {
cursor: pointer;
background: #f1f1f1
}
}
}
Hope this help!
Edit
this is my auto complete (small screen 'cause screencast on chrome and keyboard up)