My dropdown contains 100 values, and I am currently able to search for these values based on key input using wild search. However, I would like the dropdown to display values based on the specific alphabet that I enter first.
HTML:
<div class="col-sm-6 pull-left m-b10 m-t10">
<label class="lbl_manifes pull-left col-form-label g-color-gray-dark-v2 g-font-weight-700 text-sm-left no-padd">Manifestation
<span class="required">*</span>
</label>
<div class="col-sm-8 pull-left no-padd w-71">
<input type='text' (keyup)="searchDropDown(175, src13.value)" #src13 formControlName="Manifestation" [(ngModel)]="selectedManifestation" placeholder="Please keyin (eg:Ac)"
/>
<i class="fa fa-caret-down"></i>
<div *ngIf="allergyDropDown && allergyDropDown?.manifestation && IsHidden" class="emr-dropdown">
<ul *ngFor="let manifestationType of allergyDropDown?.manifestation" (click)="getValue(manifestationType)" class="p-l10 m-b0 brd-b">
<li>
{{manifestationType.Description}}
</li>
</ul>
</div>
</div>
</div>
TS:
public getValue(item) {
this.IsHidden = false;
if (item.CategoryId == 175) {
this.selectedManifestation = item.Description;
}
}
public searchDropDown(Id, desc) {
let params = { Id, desc: desc }
this.emrService.getDropDown(params)
.subscribe((res) => {
this.IsHidden = true;
this.initializeAllDropDown(res.Body.Data)
})
}