css – 角度2：如何限制搜索结果的数量在ng2-completer？

在我的应用程序中使用 ng2-completer,当我们开始输入它会使api调用,它将从服务器获取记录工作正常.问题是如果完成获取超过50个条目,那么它与整个屏幕重叠,我如何限制下拉长度？我尝试了下面的CSS,但它不工作.

.completer-dropdown {
   overflow-y: auto !important;
   max-height: 100px !important;
 }

这是我的HTML代码.

<ng2-completer  placeholder="Enter Your Locality Name" class="overlay" [dataService]="dataServiceForLocality" [minSearchLength]="3" [fieldTabindex]="2" [(ngModel)]="localityValue" (selected)="selectedLocality($event)" [textSearching]="'Please wait...'" formControlName="locality" style="height: 50px;" (keyup)="onKey($event.target.value)"></ng2-completer>

您可以查看实例here.

解决方法

我不认为ng2-completer现在支持这个功能.

但无论如何,即使ng2-completer支持该功能,您的数据服务应该是对最大项目数量负责的数据服务.所以刚刚返回前10-20个项目找到,你不想返回到客户端的整个数据集.如果你找到数以千计的项目呢？

如果用户看到许多项目,他明白,他必须更精确地指定搜索.

编辑：刚刚检查了CSS类,你很亲密,对我来说,这个工作直接在demo页面中.改变了一个页面的样式：

.completer-dropdown[_ngcontent-tsn-1] {
    max-height: 200px !important;
    overflow-y: scroll;
    overflow-x: hidden;
    ...
}

见下图：

原文地址：https://www.jb51.cc/css/217030.html