Names on searchbar, added by checkbox - html

Question

<ion-header no-border style="border-bottom: 1px solid #EDEDED;">
<ion-navbar no-border-bottom>
<ion-title>
Nova Mensagem
</ion-title>
<ion-buttons end>
<button ion-button icon-only>
<span style="color:#5D5A56">Seguinte</span>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class="contentbg">
<div style="padding:15px;background-color:white;" class="customborder2">
<span style="font-size:16px;color:#5D5A56;margin-right:5px;margin-top:10px">Para:</span>
<ion-chip *ngFor="let lista of selecionados; let i = index" #chip1 style="background-color:#F0F0F0;color:#5D5A56;margin-right:5px">
<ion-label>{{lista}}</ion-label>
<button ion-button clear (click)="delete(chip1, listaIds[i], lista, check[i])">
<ion-icon name="close-circle"></ion-icon>
</button>
</ion-chip>
</div>
<div style="border-bottom: 1px solid #F3F3F3;background-color:white">
<ion-searchbar mode="md"
[(ngModel)]="searchQuery"
[showCancelButton]="shouldShowCancel"
placeholder="Pesquisar utilizadores"
(ionInput)="onInput($event)"
(ionCancel)="onCancel($event)">
</ion-searchbar>
</div>
<ion-label style="margin-left:15px;margin-top:30px;">
<span class="strong" style="text-transform:uppercase;font-size:13px;color:#999999">{{titulo}}</span>
</ion-label>
<ion-list>
<ion-item *ngFor="let sugestao of sugeridos" class="customborder customborder2 animacao" >
<ion-label>
<ion-avatar style="float:left">
<div style="border-radius:50%;width:40px;height:40px;background-position:center;background-size:cover" [style.background-image]="'url(http://bacotaco.web.ua.pt/img/' + sugestao.foto + ')'"></div>
</ion-avatar>
<div style="float:left;position:relative;top:3px;left:10px">
<div style="text-overflow:ellipsis;overflow: hidden;"><p style="font-size:16px;color:black">{{sugestao.nomeC}}</p></div>
<p class="sub" style="color:#AAAAAA;font-size:14px;">{{sugestao.tipo}}</p>
</div>
</ion-label>
<ion-checkbox item-right color="tint" (click)="selecionado(sugestao.id, sugestao.nome, sugestao.index)" [(ngModel)]="sugestao.selecionado"></ion-checkbox>
</ion-item>
</ion-list>
</ion-content>
You can select people via a list created from a database, by searching.
_
The structure is the following:
A div with "To:", where the names are added after (To: Mike e.g.);
The search bar;
An ion-list with the searched people with a checkbox each.
Here's a screenshot.
_
When you check someone, the name is added as a span to the div where "To:" is. Deselecting removes the name. People can be searched via the search bar, updating the list.
My question is: how can I simply add the names into the search bar, instead of having a separate div, moving the cursor to the right.
Like what it is on Facebook's Messenger or Instagram - check picture.