<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>
您可以通过搜索来从数据库创建的列表中选择人员。
_
结构如下:
带有“To:”的div,其中的名称是在(To:Mike例如)之后添加的;
搜索栏;
带有搜索人员的离子列表,每个人都有一个复选框。
_
当您检查某人时,该名称将作为跨度添加到“To:”所在的div中。取消选择将删除名称。可以通过搜索栏搜索人员,更新列表。
我的问题是:如何简单地将名称添加到搜索栏中,而不是使用单独的div,将光标移动到右侧。
与Facebook的Messenger或Instagram上的内容一样 - check picture。