16

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.

Here is my issue screen shot

Amruth
  • 5,792
  • 2
  • 28
  • 41

6 Answers6

17

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:

enter image description here

Petr Adam
  • 1,425
  • 11
  • 23
  • Ya @Peter we can return 10 to 15 records, but i wanted to bring all the records and wanted to filter the records in the form only.. but max records directive not implemented in ng2-completer i think. as of now am returning only first 10 records only. thank you . – Amruth Dec 01 '16 at 08:54
  • And have you tried the CSS I posted in Edit? It does the trick with scroll bar – Petr Adam Dec 01 '16 at 08:58
  • Can you show me how did you tried with CSS? I have tried it in the browser directly (added style through F12 developer console), just a proof of concept and as you can see on the screenshot, worked perfectly. – Petr Adam Jan 03 '17 at 08:41
  • i can't access project its already running in live system. thank you – Amruth Jan 03 '17 at 08:45
5

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.

Amruth
  • 5,792
  • 2
  • 28
  • 41
5

It's doable, you just need to be aware that angular 2 uses view encapsulation and since ng2-completer is a different component setting the styles without the /deep/ or >>> selectors won't affect it.

To restrict the dropdown length you can specify the following styles in the component that contains it:

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

Another option is to filter the items before they are provided to ng2-completer this can be done by creating a custom CompleterData and manipulating its output

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

see plunk

Ofer Herman
  • 3,018
  • 1
  • 20
  • 21
3

Yes, i think this is worked 

ng2-auto-complete{
    height: 400px; 
    overflow-y: scroll; 
    overflow-x: hidden;
}
Sahin
  • 87
  • 1
  • 3
  • 13
0

Use overflow-y: auto; because of ng2-complete up & down arrow use select time scroll change automatic.

Jai Kumaresh
  • 715
  • 1
  • 7
  • 33
0

I knew this is a old question, but maybe someone has the same issue and needs help. My solution for the problem is a little different. My project has a huge amount of data. So the search list can be up to 10.000 strings. This is way to hard to get handled by a old computer or smartphone from a potential user. So just hide the objects wouldn't be the solution for me. I could use some cdk-virtual-scrolling but mod a full component doesn't feel good.

So the solution for me was to modify the array before sending it to ng2-completer like Ofer Herman explained before. But in my case i had a offline array.

at first i add [(ngModel)]="searchText" to the ng2-completer tag. In my component ts i did something like this:

  preSearchFilter() {
   this.filteredArray = this.searchOptions.filter(p => 
   String(p).startsWith(this.searchText));
   this.filteredArray = this.filteredArray.slice(0, 21);
  }

After this i just had to set the filtered Array as my Variable for the ng2-completer like this: [datasource]="filteredArray"

Hopefully it helps:)

blank42
  • 1
  • 3