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

我在我的应用程序中使用ng2-completer，当我们开始输入一些东西时，它会调用API，它会从服务器获取记录，它的工作正常。

问题是如果完成者获得超过50个条目，那么它重叠整个屏幕，我怎样才能限制下拉长度？

我试过下面的CSS，但它不工作。
Angular 2：如何限制ng2-completer中搜索结果的数量？

.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。

来源

2016-12-01 Amruth LS

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

但无论如何，即使NG2补足者支持该功能，数据服务应该是一个负责项目的最大计数。所以只需返回第一个找到的10-20个项目，您不想返回到客户端的整个数据集。如果您发现数千甚至更多的物品会怎样？

如果用户看到很多项目，他明白，他必须更精确地指定搜索。

编辑：刚才已经检查了CSS类，你close..for我这个工作，直接在演示page..changed页面这样的风格：

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

看到图像如下：

来源

2016-12-01 08:10:51

雅@Peter我们可以回到10至15条记录，但我希望把所有的记录，想过滤的形式仅..但最高记录指令不NG2补足者，我认为实现记录。截至目前，我只返回前10条记录。谢谢。 –

你有没有尝试过我编辑过的CSS？它可以通过滚动条来实现。 –

你能告诉我你是怎么用CSS试过的吗？我已经在浏览器中直接尝试过它（通过F12开发者控制台添加样式），只是一个概念验证，并且您可以在屏幕截图中看到，完美运行。 –

截至目前，这是不可能的NG2补足者。

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

来源

2016-12-31 10:42:31

这是可行的，你只需要知道，角2使用view encapsulation以来ng2-completer是一个不同的组件设置样式，而不/deep/或>>>选择不会影响它。

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

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

另一种选择是提供给NG2补足者可以通过创建完成之前，他们筛选的项目自定义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

来源

2017-01-08 09:48:04

是的，我认为这为w orked

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

来源

2017-11-09 04:51:47 Sahin

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

回答

相关问题