Angular 2 : How to limit the number of search results in ng2-completer?

Question

Am using ng2-completer in my application, when we start enter something it will make api call and it will fetch the records from the server its working fine.

The issue is if completer gets more than 50 entries, then it overlaps the whole screen, how can i restrict the dropdown length ?

I tried the below css but its not working.

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

This is my html code.

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

You can check the live example here.

Answer 1

I don't think ng2-completer supports this feature right now.

But anyway, even if ng2-completer supports the feature, your data service should be the one responsible for maximum count of items. So just return first 10-20 items found, you don't want to return to client whole dataset. What if you find thousands or even more items?

If the user sees to many items, he understands, he must specify the search more precisely.

Edit: just have checked the CSS classes, you were close..for me this worked directly in the demo page..changed the styles of a page like this:

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

See the image below:

Answer 2

As of now this is not possible from ng2-completer.

The better way to prevent more record is to send only 10 to 12 records from api.