I am trying to replace the custom suggestion menu that I built in the past with mat-autocomplete. Unfortunately, I cannot get it to work without clicking on it matInput
. Here is what I have right now:
<div id="connection-editor" class="resizable"
contenteditable="true">
</div>
<mat-form-field>
<input matInput type="text" placeholder="Add type..." aria-label="Number" [formControl]="atQuery" [matAutocomplete]="auto">
</mat-form-field>
<mat-autocomplete
[style.position]="absolute"
[style.left]="suggestX + 'px'"
[style.top]="suggestY + 'px'" #auto="matAutocomplete">
<mat-option *ngFor="let entry of entities" [value]="entry.name" (onSelectionChange)="onEntrySelect(entry)">
{{ entry.name }}
</mat-option>
</mat-autocomplete>
I update atQuery
based on interactions in contenteditable
, and the object entities
fills correctly.
this.atQuery.valueChanges
.debounceTime(400)
.subscribe(query => {
this.connectionService.queryEntries(query).subscribe(text => {
const suggestions: SuggestionJson[] = <SuggestionJson[]> JSON.parse(text).content;
if (suggestions.length === 1) {
const suggestion: SuggestionJson = suggestions[0];
this.users = suggestion.users.map((e) => e.complex);
this.entities = suggestion.entities.map((e) => e.complex);
this.primitives = suggestion.primitives.filter((e) => !e.value).map((e) => {
const pr: PrimitiveEntryJson = new PrimitiveEntryJson();
pr.value = e.value;
pr.type = e.type;
return pr;
});
}
});
});
I had two variables suggestX
and suggestY
that would put a menu of sentences under the text cursor.
Right now, the mat-autocomplete
results appear only when I click on the input that has [formControl]
. I want to control when they appear so that it can work with absolute positioning.
mat-autocomplete
( ) formControl
, ?