How can you control the search results limit in Angular 2 using ng2-completer?

Question

How can you control the search results limit in Angular 2 using ng2-completer?

Utilizing ng2-completer within my application has been a seamless experience so far. When users start entering text, it triggers an API call to fetch records from the server. However, I have encountered an issue where if the completer returns more than 50 entries, it ends up overlapping the entire screen. How can I limit the dropdown length to prevent this overlap?

Although I attempted to resolve this with the following CSS code, it did not yield the desired outcome.

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

Below is a snippet of 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 view a live example of this implementation here.

https://i.sstatic.net/O2ydM.png

css angular

Answer 1

Answer №1

It appears that the current version of ng2-completer does not have support for this particular feature at the moment.

Regardless, even if ng2-completer were to include the feature, it is more efficient for your data service to handle the maximum number of items. It is recommended to only return the first 10-20 items that are found, rather than returning the entire dataset to the client. Imagine if thousands or more items were returned?

If a user is presented with too many items, they will likely understand the need to refine their search criteria.

Edit: After reviewing the CSS classes, it seems that you were close in implementing the necessary changes. In my case, adjusting the styles directly on the demo page worked well. This involved modifying the page's CSS like so:

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

Refer to the image below for further clarification:

https://i.sstatic.net/iNRsA.png

Answer 2

It appears that the current version of ng2-completer does not have support for this particular feature at the moment.

Regardless, even if ng2-completer were to include the feature, it is more efficient for your data service to handle the maximum number of items. It is recommended to only return the first 10-20 items that are found, rather than returning the entire dataset to the client. Imagine if thousands or more items were returned?

If a user is presented with too many items, they will likely understand the need to refine their search criteria.

Edit: After reviewing the CSS classes, it seems that you were close in implementing the necessary changes. In my case, adjusting the styles directly on the demo page worked well. This involved modifying the page's CSS like so:

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

Refer to the image below for further clarification:

https://i.sstatic.net/iNRsA.png

Answer 3

Answer №2

Currently, ng2-completer does not support this feature.

To limit the number of records retrieved, it is recommended to only request 10 to 12 records from the API.

Answer 4

Currently, ng2-completer does not support this feature.

To limit the number of records retrieved, it is recommended to only request 10 to 12 records from the API.

Answer 5

Answer №3

It is possible, but it is important to note that angular 2 utilizes view encapsulation. Since ng2-completer is a separate component, styling it without using the /deep/ or >>> selectors will not have any effect.

To limit the dropdown length, you can define the following styles within the containing component:

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

Alternatively, you can filter the items before passing them to ng2-completer by creating a custom CompleterData and altering 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();
                
                // Manipulate the result as needed
                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 necessary
    }

    public convertToItem(data: any): CompleterItem {
        if (!data) {
            return null;
        }
        
        return {
            title: typeof data === "string"? data : data.text
        }
    }
}

Check out the plunk demo.

Answer 6

It is possible, but it is important to note that angular 2 utilizes view encapsulation. Since ng2-completer is a separate component, styling it without using the /deep/ or >>> selectors will not have any effect.

To limit the dropdown length, you can define the following styles within the containing component:

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

Alternatively, you can filter the items before passing them to ng2-completer by creating a custom CompleterData and altering 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();
                
                // Manipulate the result as needed
                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 necessary
    }

    public convertToItem(data: any): CompleterItem {
        if (!data) {
            return null;
        }
        
        return {
            title: typeof data === "string"? data : data.text
        }
    }
}

Check out the plunk demo.

Answer 7

Answer №4

Absolutely, I believe this solution has proven to be effective

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

Answer 8

Absolutely, I believe this solution has proven to be effective

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

Answer 9

Answer №5

To ensure smooth scrolling when navigating with the up and down arrows in ng2-complete, make sure to apply overflow-y: auto;. This will automatically adjust the scroll position as you select different times.

Answer 10

To ensure smooth scrolling when navigating with the up and down arrows in ng2-complete, make sure to apply overflow-y: auto;. This will automatically adjust the scroll position as you select different times.

Answer 11

Answer №6

Although this question may be old, there could still be someone facing the same issue and in need of assistance. I approached solving this problem in a unique way due to the large amount of data in my project. With a search list containing up to 10,000 strings, simply hiding objects was not a viable solution for me as it would overwhelm older computers or smartphones used by potential users. While using cdk-virtual-scrolling was an option, modifying a full component didn't sit well with me.

My solution involved modifying the array before passing it to ng2-completer, inspired by Ofer Herman's earlier explanation. However, in my case, I was dealing with an offline array.

I began by adding [(ngModel)]="searchText" to the ng2-completer tag. In my component's TypeScript file, I implemented the following logic:

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

Afterward, I simply assigned the filtered Array as the datasource for the ng2-completer: [datasource]="filteredArray"

I hope this unconventional approach proves helpful to others facing similar challenges :)

Answer 12

Although this question may be old, there could still be someone facing the same issue and in need of assistance. I approached solving this problem in a unique way due to the large amount of data in my project. With a search list containing up to 10,000 strings, simply hiding objects was not a viable solution for me as it would overwhelm older computers or smartphones used by potential users. While using cdk-virtual-scrolling was an option, modifying a full component didn't sit well with me.

My solution involved modifying the array before passing it to ng2-completer, inspired by Ofer Herman's earlier explanation. However, in my case, I was dealing with an offline array.

I began by adding [(ngModel)]="searchText" to the ng2-completer tag. In my component's TypeScript file, I implemented the following logic:

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

Afterward, I simply assigned the filtered Array as the datasource for the ng2-completer: [datasource]="filteredArray"

I hope this unconventional approach proves helpful to others facing similar challenges :)

How can you control the search results limit in Angular 2 using ng2-completer?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Angular2 is throwing a TypeError, stating that OrbitControls is not a valid constructor

Dynamic divs to occupy the rest of the available vertical area

Hexagon in the Middle

Setting the z-index to place an absolutely positioned element below a relatively positioned one

After a successful login, Angular will once again redirect the user to the login page

Struggling to make the background image appear full screen on the webpage despite implementing a script

What is the best way to combine two objects in Angular?

Issue: npm encountered an error due to writing after reaching the end

I am looking for a way to have one element as a child of another element without automatically adopting specific properties

Enforcing custom validation with Angular 2 upon keyup event

Ways to implement CSS in my JQuery Plugin

Detecting when the Chrome browser reloads with a mouse click using Typescript

Having difficulty connecting to the router within a container component for Angular2 routing

How can we avoid duplicating injectors in a child class when extending a class that already has injected services?

I need to style a blockquote so that it floats to the right, but I also want it to be

I am looking to use jQuery to position a table at the top of the page

Issues with IE6 hover state not properly resetting

Hover Effect in JavaScript

Customizing the appearance of map items in a React JS application

Exploring resources within a library in Angular