Dropdown filtering

UI Components for Angular
Post Reply
maciej1234567
Posts: 1
Joined: 07 Aug 2019, 10:18

07 Aug 2019, 10:20

How to add custom filtering do p-dropdown. I want matching x or y if i have in input "x y".

yigitfindikli
Posts: 357
Joined: 08 Aug 2018, 14:09

08 Aug 2019, 13:26

maciej1234567 wrote:
07 Aug 2019, 10:20
How to add custom filtering do p-dropdown. I want matching x or y if i have in input "x y".
Hi,
Sorry, i couldn't understand, can you be more spesific?
Best Regards.

Fearlezz90
Posts: 2
Joined: 08 Aug 2019, 16:10

08 Aug 2019, 16:14

Hi,
if I understand what you want,

add filterBy="x, y"

from doc -> "labelBy string label When the filter is enabled, filterBy decides in which field or fields (separated by a comma) to search."

rokimoki
Posts: 14
Joined: 28 Jun 2019, 16:04

12 Aug 2019, 17:41

In this case you proabbly need to do your own filter.

Try autocomplete advanced: https://www.primefaces.org/primeng/#/autocomplete

component.html

Code: Select all

<div class="p-grid">
        <div class="p-col-1">
            Address 1
        </div>
        <div class="p-col-3">
            <p-autoComplete 
                [(ngModel)]="address1" 
                [suggestions]="streetStringList"
                (completeMethod)="searchAddress($event)" 
                [dropdown]="true"></p-autoComplete>
        </div>
</div>
component.ts

Code: Select all

searchAddress(event) {
    this.streetStringList = this.someService.getFilteredStreets(event.query);
}
component.service.ts

Code: Select all

getFilteredStreets(street: string): string [] {
 	let separatedBySpace: string[] = street.split(' ');
        return this.streetStringList.filter(
            (element: string) => {
                return element.match(new RegExp(separatedBySpace[0], 'gi')); // global, ignoreCase, no accent ignore
            }
        ).filter(
            (element: string) => {
                return element.match(new RegExp(separatedBySpace[1], 'gi')); // global, ignoreCase, no accent ignore
            }
        );
}
This is kinda you want but... if you want for multiple spaces, or there is no space, you have to control that, this is an example only ;)

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests