向 ngbTypeahead 添加滚动条答案

【问题标题】：Add scrollbar to ngbTypeahead向 ngbTypeahead 添加滚动条
【发布时间】：2019-05-30 04:50:15
【问题描述】：

ngbTypeahead 不提供滚动条。我将此作为NgbTypeahead component doesn't scroll inside a scrollable component的推荐：

            <div style="height: 300px; overflow-y: auto; position:relative">
                <input type="text" name="origin" class="form-control form-control-sm" id="origin" [(ngModel)]="data.origin" [editable]="false" [ngbTypeahead]="searchOrigin"
                    [resultFormatter]="formatDropdown" [inputFormatter]="formatSelected" placeholder="Search..."/>
            </div>

效果很好，只是在列表不显示（或没有焦点）时显示丑陋的空白区域

当带有滚动条的列表出现时，如何去除空白并覆盖在另一个元素上？

感谢您的帮助。

【问题讨论】：

我已经回答了这个问题。请关注：stackoverflow.com/a/63010957/13968446

标签： scrollbar typeahead

【解决方案1】：

我通过向上移动“高度”样式解决了这个问题：

[style.height]="data.origin? '5rem': dropdownHeight":

正如我所见，对于 ngbTypeahead，当用户没有选择任何项目时，data.origin 是未定义的，所以我希望当用户从下拉列表中选择一些项目时，我将高度设置为最小值。

在 .html 文件中：

        <div class="form-group row" [class.has-danger]="searchFailedOrigin" [style.height]="data.origin? '5rem': dropdownHeight">

            <label for="origin" class="col-sm-4 col-form-label col-form-label-sm">Origin</label>

            <div class="col-sm-7 col-offset-sm-1" style="overflow-y: auto; position:relative">

                <input type="text" name="origin" class="form-control form-control-sm" id="origin" [(ngModel)]="data.origin" [editable]="false" [ngbTypeahead]="searchOrigin"
                    [resultFormatter]="formatDropdown" [inputFormatter]="formatSelected" placeholder="Search..."/>
            </div>

            <div class="form-control-feedback" *ngIf="searchFailedOrigin">No Airports Found...</div>

        </div>

在 searchOrigin 函数的组件 .ts 文件中更新 dropdownHeight 的位置：

searchOrigin = (text$: Observable<string>) => {
    .
    .
    .

    // response is the response from server. It is a list of data filtering by "text"

    this.dropdownHeight = response.data.length <= 1? `5rem`: response.data.length <= 10? `${(response.data.length + 1) * 2.56}rem`: `28rem`;

    // An item in the dropdown list is 2.56rem in height
    // I want the maximum height is 28rem.
    .
    .
    .

}

此方案可以在不显示下拉列表时去除难看的空白，但下拉列表不会覆盖其他元素。

感谢任何改进。

【讨论】：