truly-ui
Version:
Web Components for Desktop Applications.
182 lines (176 loc) • 7.16 kB
HTML
<div class="router-outlet">
<div class="header-title-demo">
<h1 class="title">AutoComplete</h1>
<p class="text-content">There's a lot of ways to create a autocomplete using Truly UI. Below, are some of those.</p>
</div>
<hr>
<div class="showcase">
<div class="row">
<div class="col-md-6">
<div class="group-component">
<h5>Basic SimpleData</h5>
<tl-autocomplete [data]="simpleData" [(ngModel)]="result" [searchIcon]="true" [clearButton]="true"></tl-autocomplete>
<span class="returned-value"> Return Value: {{ result | json }}</span>
</div>
</div>
<div class="col-md-6">
<div class="group-component">
<h5>Basic Data</h5>
<tl-autocomplete [data]="data" [dataID]="'id'" [dataID]="'id'" [dataLabel]="'firstName'"
[query]="['id','firstName']" [dataDescription]="'title'"
[(ngModel)]="result2"></tl-autocomplete>
<span class="returned-value"> Return Value: {{ result2 | json }}</span>
</div>
</div>
</div>
<!--<div class="row">-->
<!--<div class="col-md-6">-->
<!--<div class="group-component">-->
<!--<h5>Basic Big Data</h5>-->
<!--<tl-autocomplete [data]="bigData" [display]="['id', 'label']" [valueField]="['label']"-->
<!--[query]="['id', 'label']" [(ngModel)]="result3"></tl-autocomplete>-->
<!--<span class="returned-value"> Return Value: {{ result3 | json }}</span>-->
<!--</div>-->
<!--</div>-->
<!--<div class="col-md-6">-->
<!--<div class="group-component">-->
<!--<h5>Label</h5>-->
<!--<tl-autocomplete [data]="data" [label]="'Label:'" [labelPlacement]="'left'" [labelWidth]="70" [display]="['label']" [valueField]="['label']"-->
<!--[query]="['label']" [(ngModel)]="result4"></tl-autocomplete>-->
<!--<span class="returned-value"> Return Value: {{ result4 | json }}</span>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<div class="row">
<div class="col-md-6">
<div class="group-component">
<h5>Clear Button</h5>
<tl-autocomplete [data]="data" [clearButton]="true" [dataID]="'id'" [dataLabel]="'firstName'"
[query]="['id','firstName','title']" [dataDescription]="'title'"
[(ngModel)]="result5"></tl-autocomplete>
<span class="returned-value"> Return Value: {{ result5 | json }}</span>
</div>
</div>
<!--<div class="col-md-6">-->
<!--<div class="group-component">-->
<!--<h5>Placeholder</h5>-->
<!--<tl-autocomplete [data]="data" [placeholder]="'ex.: Asia'" [display]="['label']" [valueField]="['label']"-->
<!--[query]="['label']" [(ngModel)]="result6"></tl-autocomplete>-->
<!--<span class="returned-value"> Return Value: {{ result6 | json }}</span>-->
<!--</div>-->
<!--</div>-->
</div>
<!--<div class="row">-->
<!--<div class="col-md-6">-->
<!--<div class="group-component">-->
<!--<h5>Required</h5>-->
<!--<tl-autocomplete [data]="data" [label]="'Required:'" [validations]="{required: true}" [display]="['label']" [valueField]="['label']"-->
<!--[query]="['label']" [(ngModel)]="result7"></tl-autocomplete>-->
<!--<span class="returned-value"> Return Value: {{ result7 | json }}</span>-->
<!--</div>-->
<!--</div>-->
<!--<div class="col-md-6">-->
<!--<div class="group-component">-->
<!--<h5>Minimum Character To Search</h5>-->
<!--<tl-autocomplete [data]="data" [display]="['label']" [valueField]="['label']" [query]="['label']" [(ngModel)]="result8" [minCharToSearch]="4"></tl-autocomplete>-->
<!--<span class="returned-value"> Return Value: {{ result8 | json }}</span>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
</div>
<hr>
<div class="setup">
<h3 class="title">Properties</h3>
<h5 class="title">tl-autocomplete</h5>
<div class="table-box">
<table class="table table-truly">
<thead class="table-truly-head">
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
<th>Options</th>
</tr>
</thead>
<!--<tbody class="table-truly-body" *ngFor="let item of dataTableProperties; let i = index">-->
<!--<tr>-->
<!--<td><span>{{ item.name }}</span></td>-->
<!--<td><span class="badge">{{ item.type }}</span></td>-->
<!--<td><code>{{ item.default }}</code></td>-->
<!--<td>{{ item.description }}</td>-->
<!--<td><code> {{ item.options }} </code></td>-->
<!--</tr>-->
<!--</tbody>-->
</table>
</div>
<hr>
</div>
<div class="examples">
<h3 class="title">Examples</h3>
<div class="group-component">
<h5 class="title">Basic SimpleData</h5>
<textarea highlight-js [options]="{'tabReplace': ''}" [lang]="'html'">
<tl-autocomplete [data]="simpleData" [(ngModel)]="result"></tl-autocomplete>
</textarea>
</div>
<div class="group-component">
<h5 class="title">Basic Data</h5>
<textarea highlight-js [options]="{'tabReplace': ''}" [lang]="'html'">
<tl-autocomplete [data]="data"
[display]="['label']"
[valueField]="['label']"
[query]="['label']"
[(ngModel)]="result2">
</tl-autocomplete>
</textarea>
</div>
<div class="group-component">
<h5 class="title">Basic Big Data</h5>
<textarea highlight-js [options]="{'tabReplace': ''}" [lang]="'html'">
<tl-autocomplete [data]="bigData"
[display]="['id', 'label']"
[valueField]="['label']"
[query]="['id', 'label']"
[(ngModel)]="result3">
</tl-autocomplete>
</textarea>
</div>
<div class="group-component">
<h5 class="title">Label</h5>
<textarea highlight-js [options]="{'tabReplace': ''}" [lang]="'html'">
<tl-autocomplete [data]="data"
[label]="'Label Text'"
[display]="['label']"
[valueField]="['label']"
[query]="['label']"
[(ngModel)]="result4">
</tl-autocomplete>
</textarea>
</div>
<div class="group-component">
<h5 class="title">Clear Button</h5>
<textarea highlight-js [options]="{'tabReplace': ''}" [lang]="'html'">
<tl-autocomplete [data]="data"
[clearButton]="true"
[display]="['label']"
[valueField]="['label']"
[query]="['label']"
[(ngModel)]="result5">
</tl-autocomplete>
</textarea>
</div>
<div class="group-component">
<h5 class="title">Placeholder</h5>
<textarea highlight-js [options]="{'tabReplace': ''}" [lang]="'html'">
<tl-autocomplete [data]="data"
[placeholder]="'ex.: Asia'"
[display]="['label']"
[valueField]="['label']"
[query]="['label']"
[(ngModel)]="result6">
</tl-autocomplete>
</textarea>
</div>
</div>
</div>