Góc 2: Cách giới hạn số lượng kết quả tìm kiếm trong ng2-completer?

Question

Đang sử dụng ng2-completer trong ứng dụng của tôi, khi chúng tôi bắt đầu nhập một cái gì đó nó sẽ thực hiện cuộc gọi api và nó sẽ lấy các hồ sơ từ máy chủ của nó làm việc tốt.

Vấn đề là nếu hoàn thành nhận được hơn 50 mục nhập, sau đó nó trùng lặp toàn bộ màn hình, làm thế nào tôi có thể hạn chế độ dài thả xuống?

Tôi đã thử css bên dưới nhưng không hoạt động.

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

Đây là mã html của tôi.

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

Bạn có thể kiểm tra ví dụ sống here.

Answer 1

Tôi không nghĩ ng2-completer hỗ trợ tính năng này ngay bây giờ.

Nhưng dù sao, ngay cả khi ng2-completer hỗ trợ tính năng này, dịch vụ dữ liệu của bạn phải là người chịu trách nhiệm cho số lượng mục tối đa là. Vì vậy, chỉ cần trả lại 10-20 mục đầu tiên được tìm thấy, bạn không muốn quay lại toàn bộ tập dữ liệu của khách hàng. Điều gì sẽ xảy ra nếu bạn tìm thấy hàng nghìn hoặc nhiều mục hơn?

Nếu người dùng thấy nhiều mục, anh ấy hiểu, anh ấy phải chỉ định tìm kiếm chính xác hơn.

Sửa: chỉ đã kiểm tra các lớp CSS, bạn đã close..for tôi này làm việc trực tiếp trong bản demo page..changed phong cách của một trang như thế này:

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

Xem hình ảnh bên dưới:

Answer 2

Hiện tại, điều này là không thể từ ng2-completer.

Cách tốt hơn để ngăn chặn nhiều bản ghi hơn là chỉ gửi 10 đến 12 bản ghi từ api.

Answer 3

Đó là doable, bạn chỉ cần lưu ý rằng góc 2 sử dụng view encapsulation và kể từ ng2-completer là một thành phần khác nhau thiết lập các phong cách mà không /deep/ hoặc >>> selectors sẽ không ảnh hưởng đến nó.

Để hạn chế độ dài kéo xuống, bạn có thể xác định phong cách sau trong thành phần có chứa nó:

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

Một lựa chọn khác là để lọc các mục trước khi chúng được cung cấp cho ng2-Completer này có thể được thực hiện bằng cách tạo ra một phong tục CompleterData và thao tác sản lượng của nó

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

thấy Vâng, tôi nghĩ rằng đây là w orked

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