I'm using p-listbox and I want to know... (searching accents)

UI Components for Angular
Post Reply
rokimoki
Posts: 14
Joined: 28 Jun 2019, 16:04

14 Jul 2019, 11:50

Hi!
I have a list like

Code: Select all

        this.cities = [
            {name: 'León', code: 'L'},
            {name: 'Madrid', code: 'M'}
        ];
If I search: 'leon', 'león', 'LEON', etc... (with accent or without) it searches, so it's nice. But if I do this manually, with RegEx (gi), it only searches with accents, is prime NG using another RegEx library or similar? I want to know, because I can replace accents for non accents but I want to avoid to do that code because is ugly, not maintenable in big applications with lot of search components,I just want a powerful RegEx lib to ignore accents. (javascript/angular)

Thanks!

Kajal
Posts: 1
Joined: 15 Jul 2019, 08:41

15 Jul 2019, 08:46

I want to enable startsWith and contains mode on listbox search after a button click. But I am unable to change default contains mode of it. Please suggest how to use filter and filtermode for that with example urgently.

My html code:
<input type="text" pInputText (click)="search.toggle($event)" placeholder="Select name" [(ngModel)]="selectedCities[0].name"/>

<p-overlayPanel #search>
<p>Search By:
<button type="text" (click)="setFilterType('startsWith')" pButton label="StartsWith"></button>&nbsp;
<button type="text" (click)="setFilterType('contains')" pButton label="Contains"></button>
</p>

<!-- <p-listbox [options]="cities" [(ngModel)]="selectedCities" filterMode="filterMode"></p-listbox> -->
<p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" filter="'filterMode'"
optionLabel="name">
</p-listbox>
</p-overlayPanel>

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

19 Jul 2019, 13:36

In my opinion I don't let user if it wants start with or contains.

Then, I use match from string library and RegEx library.

Code: Select all

in TS: selectedCity: {name: string, code: string};
<p-listbox [options]="cities" [(ngModel)]="selectedCity" multiple="multiple" filter="'filter'"></p-listbox>
That's enough for a robust filter, will match starts+contains.... if you want your own filter, I don't know how to do that in a list-box, I made my own filter with an input text and the output is a p-table with rows and columns with selectable row to select the result the user wants.

I use this:

Code: Select all

<input 
            type="text" 
            class="address-text" 
            pInputText 
            style="width: 100%;" 
            (focus)="onStartTyping();"
            (ngModelChange)="onTyping($event);" 
            [(ngModel)]="addressTyped">
            
in TS (on start typing is not relevant for the search);
  onTyping(value) { // this is executed before ngModel is updated
    this.addressTyped = value; 
    this.updateAddressFoundList(); -->  return element.address.match(new RegExp(this.addressTyped, 'gi')); // global, ignoreCase, no accent ignore HELP!!!
  }
Sorry I can't post my whole code, but that filter will return the new array to display on the p-table (p-listbox in ur case)

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

02 Aug 2019, 15:08

Bump.

Well.. any idea then how to ignore-accents in a RegEx?

Thanks.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests