Angular 2:如何限制ng2-completer中的搜索结果数量？

Question

我在我的应用程序中使用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>

您可以在此查看实时示例.

Answer 1

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

但无论如何,即使ng2-completer支持该功能,您的数据服务也应该是负责最大项目数的服务.因此,只需返回前10-20个项目,您不希望返回客户端整个数据集.如果您发现数千甚至更多物品怎么办？

如果用户看到许多项目,他理解,他必须更准确地指定搜索.

编辑:刚刚检查了CSS类,你很接近..对我来说,这直接在演示页面中工作..改变了这样的页面样式:

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

见下图:

Answer 2

到目前为止，这在 ng2-completer 中是不可能的。

防止更多记录的更好方法是仅从 api 发送 10 到 12 条记录。

Answer 3

这是可行的，您只需要知道 angular 2 使用视图封装，并且由于ng2-completer是一个不同的组件，因此设置没有/deep/or>>>选择器的样式不会影响它。

要限制下拉长度，您可以在包含它的组件中指定以下样式：

:host >>> .completer-dropdown {
    overflow-y: auto;
    max-height: 200px;
}

另一种选择是在将项目提供给 ng2-completer 之前过滤项目，这可以通过创建自定义CompleterData并操作其输出来完成

:host >>> .completer-dropdown {
    overflow-y: auto;
    max-height: 200px;
}

看到plunk