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>

您可以查看实时示例here。

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

这是可行的，你只需要注意角度2使用view encapsulation，因为ng2-completer是一个不同的组件，设置没有/deep/或>>>选择器的样式不会影响它。

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

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

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

import { Http, Response } from "@angular/http";
import { Subject } from "rxjs/Subject";

import { CompleterData, CompleterItem } from "../src";

export class CustomData extends Subject<CompleterItem[]> implements CompleterData {
    constructor(private http: Http) {
        super();
    }
    public search(term: string): void {
        this.http.get("http://example.com?seacrh=" + term)
            .map((res: Response) => {
                let data = res.json();
                // Now we can slice/sort/change or manipulate the result in any way that we want
                data = data.slice(0, 10);

                // Convert the result to CompleterItem[]
                let matches: CompleterItem[] = data.map((item: any) => this.convertToItem(item));
                // pass the result to ng2-completer
                this.next(matches);
            })
            .subscribe();
    }

    public cancel() {
        // Handle cancel if needed
    }

    public convertToItem(data: any): CompleterItem {
        if (!data) {
            return null;
        }
        // data will be string if an initial value is set
        return {
            title: typeof data === "string"? data : data.text
        }
    }
}

请参阅plunk

Answer 4

是的，我认为这是有效的

ng2-auto-complete{
    height: 400px; 
    overflow-y: scroll; 
    overflow-x: hidden;
}

Answer 5

使用overflow-y: auto;是因为ng2完整的上下箭头使用选择时间滚动自动更改。

Answer 6

我知道这是一个老问题，但也许有人遇到同样的问题，需要帮助。我对这个问题的解决方案有些不同。我的项目中有大量数据。因此，搜索列表最多可以包含10.000个字符串。这是很难由潜在用户使用旧计算机或智能手机处理的方法。因此，仅隐藏对象对我来说不是解决方案。我可以使用一些cdk-virtual-scrolling，但修改完整的组件感觉不好。

所以对我来说，解决方案是在将数组发送到ng2-completer之前先进行修改，就像Ofer Herman之前解释的那样。但就我而言，我有一个离线阵列。

首先，我将 [（ngModel）] =“ searchText” 添加到ng2-completer标签。在我的组件ts中，我做了这样的事情：

  preSearchFilter() {
   this.filteredArray = this.searchOptions.filter(p => 
   String(p).startsWith(this.searchText));
   this.filteredArray = this.filteredArray.slice(0, 21);
  }

之后，我只需要将过滤后的数组设置为ng2-completer的变量，如下所示：[datasource] =“ filteredArray”

希望它会有所帮助：）

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

6 个答案: