I am using Angular 5, and i have used following code to implement autosuggestion feature, getting the suggestion values from an API
HTML Code :
<div class="col col-lg-4">
<label for="insuranceCompanyName"> Insurance Company Name </label>
<input appDisablePaste list="companyLists" class="form-control input-sm" name="insuranceCompanyName" id='insuranceCompanyName'
formControlName="insuranceCompanyName"/>
<datalist id="companyLists" (scroll)="10" maxlength="20">
<select>
<option *ngFor="let companyOption of companyListOptions" [ngValue]="companyOption.rid">{{companyOption.companyName}}</option>
</select>
</datalist>
</div>
TS code :
onAutoSuggestion() {
this.bpForm.controls['insuranceCompanyName'].valueChanges
.debounceTime(600)
.distinctUntilChanged()
.subscribe(queryField => queryField.length >= 3 && this.searchSvc.search(queryField)
.subscribe((lookupResults: InsuranceCompany[]) =>
this.companyListOptions = lookupResults, err => console.log(err)));
}
In Chrome, it works completely fine. As soon as I type, i get the dropdown, with all the expected values. In Internet explorer, I don't get the results unless I click on the text-field. The API has given the response, but the dropdown doesn't appear unless I click. Also, it does not show all the result values. Only few of it (checked in the API response in the developer console, response has much more records, but only a few of them are seen in the dropdown).
Edit : The DOM explorer shows 24 entries in the loaded HTML Screenshot - html_dom_explorer
Here's the screen, with just 2 entries shown. Screenshot - dropdown_on_screen
