Material async with autocomplete

[iceman91176]

I'm submitting a

[ ] Bug / Regression
[x ] Feature Request / Proposal
[ ] Question

I'm using

NG Dynamic Forms Version: `7.0.2`

[ ] Basic UI
[ ] Bootstrap UI  
[ ] Foundation UI
[ ] Ionic UI
[ ] Kendo UI
[x ] Material  
[ ] NG Bootstrap
[ ] Prime NG

Description

I am looking for a solution that provides autocompletion for async datasources. Let's say i have a webservice that can be queried for contact-objects. To reduce the amount of Objects that is retrieved/displayed, a minimum of X characters has to be entered. The characters are transmitted as a query-string to the webservices and just returns the matches.

I am able to bind the webservice to the model.list property like this

model.list = searchService.search("http://apis.****/api/persons","");

but

• the whole list is retrieved
• entering additional characters does not filter, nor triggers another call

Seems to be related to #815 #829 #878

How can we achieve that ? With a custom component ?

Thank you

[udos86]

@iceman91176 Hi!

How can we achieve that ?

At the moment it's up to you to implement filtering by using valueChanges Observable of your autocomplete form control and updating the list property of your DynamicInputModel based on the user input.

[iceman91176]

hi @udos86 Thanks for the quick response. I was able to do it that way. It works so far. The only issue that remains is that the whole object is displayed in the autocomplete list, and not a single property. I think i can get around that with the displayWith property ?

Merry christmas to Nürnberg

[udos86]

@iceman91176

I think i can get around that with the displayWith property ?

Yep, that you should do it.

Merry christmas to Wiesbaden

[rernens]

@udos86

hi Udo,

looking into this for a project currently going on, I have faced two issues :

1. if the attached list is an observable, mat-autocomplete does not work at all, no mat-options are generated. It looks like model.list$ does not properly point to the observable attached to config.list of the DynamicInputModel. Will further investigate your code to turn config.list into model.list$ but there must be something wrong going on. Subscribing to the observable in ngOninit and attaching the result of the subscription to the config.list rather than the observable works.

2. no matter what if the attached autocomplete list is a list of objects, there is no way to display something meaningful in the autocomplete list ( displayWith will not do the trick as it is aimed at displaying the displayWith value in the input field but storing the objet value in the formcontrol.value

your code will always display [object Object]

<mat-option *ngFor="let option of model.list$ | async" [value]="option">{{ option }}</mat-option>

in order to address this and allow any kind of object as a list item, it is probably easier to let each developper create it own mat-autocomplete using ng-template and additional such as :

static function  displayFn(option?: any): string | undefined {
    return option ? option.fullName : undefined;
  }
...
new DynamicInputModel({
    id: 'replaced',
    autoComplete: AUTOCOMPLETE_OFF,
    inputType: 'text',
    placeholder: '?',
    hint: '?',
    list: null,
    additional: {
      matAutocomplete: 'auto'
      displayWith: displayFn
    }
  })

<ng-template modelId="replaced">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let option of options" [value]="option">{{ option.fullName }}</mat-option>
  </mat-autocomplete>
</ng-template>

[rernens]

@udos86

Hi again,

Looking into your code I think the problem might be in

this.list$ = (list as Observable<any[]>).pipe(tap(list => this._list = list));

I think this statement should be :

this.list$ = (list as Observable<any[]>).pipe(map(list => { this._list = list; return list; } ));

[rernens]

@udos86

Hi Udo,

Any feedback on my remarks above ? I need to make a décision whether or not I implement a circumvention for this or if a change can be made to the library to address the two points above.

thanks for your reply.