无法选择我的 ngui 自动完成滚动条答案

【问题标题】：cannot select my ngui-auto-complete scrollbar无法选择我的 ngui 自动完成滚动条
【发布时间】：2020-01-20 03:47:20
【问题描述】：

每次我在下拉组件上选择 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

【问题讨论】：

github.com/ng2-ui/auto-complete/issues/… 对您有帮助吗？

标签： html css angular typescript autocomplete

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：