不能 select 我的 ngui-auto-complete 滚动条

Question

每次我 select 下拉组件上的 ngui-auto-complete 滚动条时，下拉列表都会消失。

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

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

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

我没有用大滚动条测试过，我发现 Infinite scroll for autocomplete in Angular Material 6 看起来很有希望，即滚动条似乎可以正常工作。

Answer 2

您应该在输入元素上添加 [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>

不能 select 我的 ngui-auto-complete 滚动条

cannot select my ngui-auto-complete scrollbar

html

css

autocomplete

typescript

angular