CODEWITHSUNDEEP
angularautocompleteangular-material
Serhio g. Lazin
Serhio g. Lazin

Reputation: 9642

Angular2 material autocomplete issues

I have 2 material autocomplite inputs in form.

1) First one works with dynamic data, and works good except arrow buttons of keyboard don't work. It is impossible to chose an option with arrows and enter.

<mat-form-field>
    <input type="text" class="form-control" id="autoData" formControlName="autoData" matInput [matAutocomplete]="auto" (keyup)="getData($event.target.value)">
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
                    <mat-option  (onSelectionChange)="getMoreData(option.text)" *ngFor="let option of testData; let in=index" [value]="option">
                        {{ option.text }}
                    </mat-option>
            </mat-autocomplete>
</mat-form-field>

2) Second one works with static array of data. The problem - it shows all possible options, and do not filtered options when typing letters in input. Also a problem with keyboard.

The code is the same

{{option.name + " " + option.cat}}

Upvotes: 0

Views: 833

Answers (1)

Rutvij07
Rutvij07

Reputation: 375

I have done using angular with dynamic data and also filtered that data

html file

     <mat-form-field>
          <input matInput [(ngModel)] = "builderCompanyName" placeholder="Builder Company Name" [formControl]="CommercialControl" [matAutocomplete]="auto">
          <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let name of builderCompanyNameArray | listFilter:builderCompanyName" [value]="name" (click)="select(CommercialControl.value)">
              {{ name }}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>

https://i.sstatic.net/VM16y.png

You can search string also in mat-autocomplete

pipe file

import { Pipe, PipeTransform } from '@angular/core';

 @Pipe({
   name: "listFilter" 
 })

 export class ListFilterPipe implements PipeTransform {
 transform(items: any[], searchText: string): any[] {
  if (!items) return [];
  if (!searchText) return items;
  searchText = searchText.toLowerCase();
  return items.filter(it => {
    // console.log(it);
    return it.toLowerCase().includes(searchText);
   });
  }
 }

Below is the filtered result

https://i.sstatic.net/d8WJ5.png

Hope this will help you.Thank you

Upvotes: 1

Related Questions