0

我正在构建自动完成功能。

所以当我点击输入时 - 我打开下拉菜单，我在其中显示自动完成选项。

  <input [id]="autoCompleteSearchResultId" formControlName='search' type="text" autoComplete="off"/>

<div documentClick (documentClick)="closeDropDown($event)" [targetElementId]="autoCompleteSearchResultId">
    <div *ngIf='showDropDown' class='search-drop-down'>
        <div (click)='addChipHandler(s)' class='search-results'
            *ngFor="let s of autocompleteOptions | searchFilter: getInputSearchValue() : propertyValueToShow; index as i"
            id="{{autoCompleteSearchResultId}}-{{i}}">
            <a [innerHTML]="s[propertyValueToShow] | letterBold: getInputSearchValue()">
                {{s.name}}
            </a>
        </div>
    </div>
</div>

目前它工作正常。

但我想“以某种方式”连接这两个元素以相互了解。

例如，在 Angular Material 示例中，使用便宜的自动完成功能

https://stackblitz.com/edit/angular-cwkwnm?file=src%2Fapp%2Fchips-autocomplete-example.html

在输入本身上有 [matAutocomplete]="auto"属性，在mat-autocomplete组件上有#auto="matAutocomplete"参考。

如果它们相同，则在输入时单击垫子自动完成功能将打开。但是，如果我们 [matAutocomplete]="auto"从输入中删除，则不会打开自动完成功能。它们以某种方式联系在一起。

我怎样才能在我的应用程序中做到这一点？

4

0 回答 0