0

Now matAutocomplete is working when value is get changes.I have to restrict the filter operation in matautocomplete when user click the cursor in the autocomplete input field. For me when ever user click the matInput field it should list entire list with the selected optioon instead of filtered value.I try to achieve the functionality of both matselect and matAutocomplete in one.

It should do filter only , When a user searches for an option by entering a query. And it should not do a filter when user click on the input field.

1) It should search the or filter the list when user types the string the autoComplete field. 2) It should have the functionality of mat-select too.

Thanks in advance.

ts code snippet

this.currencySubs = this.currencyService.loadCurrency('en').subscribe(currency => {
    if(currency.responseCode == "0"){
    this.currencyList = currency.currencyList;

    thi.filteredCurrency = this.currencyForm.controls['currency'].valueChanges
    .pipe(
        startWith(''),
        map(cur => typeof cur === 'string' ? cur : ''),
        map(cur => cur ? this._filterCur(cur):this.currencyList.slice())

        );

    }else{
        console.log('Error in response');
    }
}
);

html code snippet

<mat-form-field class="currency" appearance="outline">
    <div class="autoSearch">
        <i class="fa fa-search" aria-hidden="true"></i>
        <input #curInp type="text" matInput  fromControlName="currency" id="currency" [matAutocomplete]="curauto" />
    </div>
    <mat-autocomplete #curauto="matAutocomplete" [displayWith]="displayCurrency">
        <mat-option #curoption *ngFor="let currency  of filteredCurrency | async " [value] ="currency">
            {{currency }}
        </mat-option>
    </mat-autocomplete>

</mat-form-field>
Shimaan
  • 177
  • 2
  • 3
  • 20
  • Does this answer your question? [Angular Material: How to validate Autocomplete against suggested options?](https://stackoverflow.com/questions/51871720/angular-material-how-to-validate-autocomplete-against-suggested-options) – Christopher Peisert Jan 11 '20 at 22:43
  • Hi @ChristopherPeisert Thanks for your reply. the autcomplete should do filter only , When a user searches for an option by entering a query. and it should not do filter when user click on the input field, If user click's no the filed it should pull all the options in the panel.Thats what i am looking for – Shimaan Jan 12 '20 at 06:17

0 Answers0