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> 

あなたはライブの例hereを確認することができます。

Answer 1

私はng2-completerは今、この機能をサポートしていないと思います。

しかし、とにかく、ng2-completerがこの機能をサポートしていても、あなたのデータサービスは、最大個のアイテムの原因となるはずです。したがって、最初の10〜20個のアイテムが返されるだけで、クライアント全体のデータセットに戻る必要はありません。何千ものアイテムを見つけたらどうなりますか？

ユーザーが多くのアイテムを見る場合、ユーザーはより正確に検索を指定する必要があることを理解しています。

編集：ちょうどCSSクラスをチェックして、あなたはこのデモに直接働いていた私close..forだったが、このようなページのスタイルをpage..changed：

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

は画像を参照してください。以下：今、このよう

Answer 2

NG2-コンプリから可能ではありません。

より多くのレコードを防ぐより良い方法は、APIから10〜12個のレコードだけを送信することです。

Answer 3

それはなんとかです、あなただけの角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

Answer 4

を参照してくださいはい、私はこれはワットだと思いますorked

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