ahmed elbarbary

ahmed elbarbary

  • NA
  • 1.6k
  • 281.4k

autocomplete Filter Not work when I write on text box?

Jun 5 2021 8:59 AM
I work on autocomplete text box on angular 7 I face issue when I write on text box
search or filter not work and not give me result .
actually when I write on text box auto complete related data must display but this not happen .
  1. class deliverysys.ts  
  2. export class deliverysys {  
  3. constructor(public optionId: number, public optionName: string) { }  
  4. }  
  1. DeliverySystemComponent.ts  
  2. export class DeliverySystemComponent implements OnInit {  
  3. myControl = new FormControl();  
  4. ExportOptions: deliverysys[];  
  5. constructor(private http: HttpClient,private _dataService: DeliverySysService) {  
  6. this._dataService.getExport().subscribe(data => { this.ExportOptions = data  
  7. console.log(this.ExportOptions)  
  8. });  
  9. }  
  10. getselected(value,index) {  
  11. console.log("selected is" + index)  
  12. }  
  13. }  
this display data as below :
  1. this.ExportOptions  
  2. (5) [{…}, {…}, {…}, {…}, {…}]  
  3. 0: {optionID: 1, optionName: "Export"}  
  4. 1: {optionID: 2, optionName: "Export Normalized"}  
  5. 2: {optionID: 3, optionName: "Export Normalized New"}  
  6. 3: {optionID: 4, optionName: "Export Normalized Relation"}  
  7. 4: {optionID: 5, optionName: "Export Nxp Comptitor"}  
  1. DeliverySystemComponent.html  
  2. <mat-form-field class="example-full-width">  
  3. <input type="text" placeholder="Select Exporter" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">  
  4. <mat-autocomplete #auto="matAutocomplete" >  
  5. <mat-option (click)="getselected(exp.optionName,i+1)" *ngFor="let exp of this.ExportOptions;let i = index" [value]="exp.optionName">  
  6. {{exp.optionName}}  
  7. </mat-option>  
  8. </mat-autocomplete>  
  9. </mat-form-field>  
as you see image below when write any text not found
not give me not found
also if word I write found auto complete not changed and not give me related result
so How to solve issue of not displaying data related when I write or filter data ?

Answers (3)