0

For Angular 5 + material library.

The core problem: I have an input field that is supposed to accept a comma separated list of words. Some of these words could be from a pre-existing list and some could be completely new. So if the word happens to be from the pre-existing list, I want to allow autocomplete to complete it. I am not able to get this to happen. Any help would be greatly appreciated.

The separator could be something other than a comma.

I thought I saw a tutorial, mostly a work around somewhere that shows this. It wasn't exactly what I want to achieve. Unfortunately, I didn't save it. If anyone has this link, it would help.

This is my code as of now. It behaves more like a drop down, then like autocomplete

<mat-form-field>
    <input matInput class="form-control" id="category" type="text" 
                  formControlName="category" 
                  [matAutocomplete]="auto" />

    <mat-autocomplete #auto="matAutocomplete">
         <mat-option *ngFor="let category of categories" [value]="category">{{category}}</mat-option>
    </mat-autocomplete>
</mat-form-field>

I have mostly used the Material library, but I am not very satisfied documentation-wise. If mixing in an autocomplete component from a different library would work better, any pointers would be helpful

meow
  • 11
  • 4
  • I'm not completely sure what you mean by "allow autocomplete to complete it." The way an autocomplete works is that the dropdown list of options is filtered by the text entered into the field, but your code needs to take care of that, and the code above doesn't. Check [here](https://material.angular.io/components/autocomplete/examples) for an example. Autocomplete is normally single selection only. For an example of an autocomplete mutli-select, check [here](https://stackoverflow.com/questions/50453564/how-do-i-implement-autocomplete-in-a-mat-select-component/50569422#50569422). – G. Tranter Jun 06 '18 at 20:16
  • Thank you so much for your reply. Sorry about the super late response. Was pulled into other things. But I will definitely check your example. Thanks again. – meow Sep 12 '18 at 21:20

0 Answers0