无法选择我的Ngui自动完成滚动条

Question

每次我在下拉菜单组件上选择ngui-auto-complete滚动条时，下拉菜单都会消失。

将滚动条添加到另一个元素而不是ngui-auto-complete是更好的主意吗？

工作示例：STACKBLITZ

dropdown.component.html

<form [formGroup]="myForm" class="form-style">
  <input
    id="input-dropdown"
    [list-formatter]="autocompleListFormatter"
    type="text"
    class="form-control"
    minlength="3"
    maxlength="20"
    ngui-auto-complete
    formControlName="gridDropdown"
    [source]="dropdownData"
    value-property-name="id"
    display-property-name="name"
    placeholder=" Search"
    [(ngModel)]="value"
    #agInput
  />
</form>

Source_code

Answer 1

您应该在输入元素上添加[close-on-focusout]="false"。 https://www.npmjs.com/package/@ngui/auto-complete

应该看起来像这样。

<form [formGroup]="myForm" id="input-dropdown" class="form-style">
  <!-- appAutoFocus - add this to input to use custom auto-focus directive-->
  <input id="input-dropdown" [list-formatter]="autocompleListFormatter" type="text" class="form-control"
    minlength="3" maxlength="20" ngui-auto-complete formControlName="gridDropdown" [source]="dropdownData" [close-on-focusout]="false"
    value-property-name="id" display-property-name="name" placeholder=" Search" [(ngModel)]="value" #agInput />
</form>

Answer 2

如果您可以依靠他人为您实现基本功能，那么Angular的Material Design组件可能会有所帮助。它还具有一个自动完成下拉菜单https://material.angular.io/components/autocomplete/overview

我还没有使用大型滚动条进行测试，我发现Infinite scroll for autocomplete in Angular Material 6看起来很有希望，也就是说，滚动条似乎可以正常工作。