Angular 2: Как ограничить количество результатов поиска в ng2-дополнении?

Я использую ng2-completer в своем приложении, когда мы начинаем вводить что-то, что он сделает api-вызов, и он будет извлекать записи из сервер работает нормально.

Проблема заключается в том, что если getter получает более 50 записей, то он перекрывает весь экран, как я могу ограничить длину выпадающего списка?

Я попробовал css c ниже, но не работал.

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

Вы можете проверить живой пример здесь.

Ответ 1

Я не думаю, что ng2-completer поддерживает эту функцию прямо сейчас.

Но в любом случае, даже если ng2-completeter поддерживает эту функцию, ваша служба данных должна быть ответственна за максимальное количество элементов. Так что просто верните первые 10-20 найденных элементов, вы не хотите возвращать весь набор данных клиента. Что, если вы найдете тысячи или даже больше предметов?

Если пользователь видит много элементов, он понимает, что он должен уточнять поиск.

Изменить: просто проверили классы CSS, вы были близки.. для меня это напрямую работало на демонстрационной странице.. изменили стили такой страницы:

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

Смотрите изображение ниже:

Ответ 2

На данный момент это невозможно из ng2-completeter.

Лучший способ предотвратить запись большего количества записей - отправить только 10-12 записей из api.

Ответ 3

Это возможно, вам просто нужно знать, что angular 2 использует просмотр инкапсуляции, а поскольку ng2-completer - это другой параметр компонента стили без селекторов /deep/ или >>> не будут влиять на него.

Чтобы ограничить длину выпадающего списка, вы можете указать следующие стили в компоненте, который содержит его:

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

Другим вариантом является фильтрация элементов до их предоставления в ng2-completeter, это можно сделать, создав пользовательский 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

Ответ 4

Да, я думаю, что это сработало

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

Ответ 5

Используйте overflow-y: auto; из-за ng2-complete & стрелка вниз использует автоматическое изменение прокрутки времени.