You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
2.6 KiB
HTML
42 lines
2.6 KiB
HTML
<div class="completer-holder md-form" style="margin-top: 0" mdbCompleter>
|
|
|
|
<input #mdbInput [attr.id]="inputId.length > 0 ? inputId : null" type="search" class="completer-input form-control mdb-autocomplete" mdbInput [ngClass]="inputClass"
|
|
[(ngModel)]="searchStr" (ngModelChange)="onChange($event)" [attr.name]="inputName" [placeholder]="placeholder"
|
|
[attr.maxlength]="maxChars" [tabindex]="fieldTabindex" [disabled]="disableInput"
|
|
[clearSelected]="clearSelected" [clearUnselected]="clearUnselected"
|
|
[overrideSuggested]="overrideSuggested" [openOnFocus]="openOnFocus" [fillHighlighted]="fillHighlighted"
|
|
(blur)="onBlur()" (focus)="onFocus()" (keyup)="onKeyup($event)" (keydown)="onKeydown($event)"
|
|
autocomplete="off" autocorrect="off" autocapitalize="off" />
|
|
<label [ngClass]="{'active': focused}">{{ label }}</label>
|
|
<div class="completer-dropdown-holder"
|
|
*mdbList="dataService;
|
|
minSearchLength: minSearchLength;
|
|
pause: pause;
|
|
autoMatch: autoMatch;
|
|
initialValue: initialValue;
|
|
autoHighlight: autoHighlight;
|
|
let items = results;
|
|
let searchActive = searching;
|
|
let isInitialized = searchInitialized;
|
|
let isOpen = isOpen;">
|
|
<div class="completer-dropdown" mdbDropdown *ngIf="isInitialized && isOpen && ((items.length > 0 || displayNoResults) || (searchActive && displaySearching))">
|
|
<div *ngIf="searchActive && displaySearching" class="completer-searching">{{_textSearching}}</div>
|
|
<div *ngIf="!searchActive && (!items || items.length === 0)" class="completer-no-results">{{_textNoResults}}</div>
|
|
<div class="completer-row-wrapper" *ngFor="let item of items; let rowIndex=index">
|
|
<div class="completer-row" [mdbRow]="rowIndex" [dataItem]="item">
|
|
<div *ngIf="item.image || item.image === ''" class="completer-image-holder">
|
|
<img *ngIf="item.image != ''" src="{{item.image}}" class="completer-image" />
|
|
<div *ngIf="item.image === ''" class="completer-image-default"></div>
|
|
</div>
|
|
<div class="completer-item-text" [ngClass]="{'completer-item-text-image': item.image || item.image === '' }">
|
|
<mdb-completer-list-item class="completer-title" [text]="item.title" [matchClass]="matchClass" [searchStr]="searchStr" [type]="'title'"></mdb-completer-list-item>
|
|
<mdb-completer-list-item *ngIf="item.description && item.description != ''" class="completer-description" [text]="item.description"
|
|
[matchClass]="matchClass" [searchStr]="searchStr" [type]="'description'">
|
|
</mdb-completer-list-item>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|