Prime NG: Search dropdown by label

Question

I am having trouble figuring out the solution for my angular project that uses prime ng. I am trying to do column search on rows of dropdown values.

If I want to find all values that are 'Jan', no data is found. However, if I search for '1' it can find all the January values. Looks like it searches for the value but not the label. How can I search for it using the label instead?

Here is the code:

**HTML:**
<p-table #tt [value]="data" ....>

<input pInputText type="text" class="colmsearch"
placeholder="Search" 
(input)="tt.filter($event.target.value, 'month', 'contains')">

.
.
.
<p-dropdown formControlName="month" class="dropdownInput" *ngSwitchCase="'month'"
[options]="monthLabels"></p-dropdown>

</p-table>

**TS:**
this.data = [
    {id: 03, name: 'First', month: 1},
    {id: 04, name: 'Second', month: 2},
    {id: 05, name: 'Third', month: 1},
    .
    .
    {id: 07, name: 'Fourth', month: 3}

];

this.monthLabels = [
    {label: "Jan", value: 1},
    {label: "Feb", value: 2},
    {label: "Mar", value: 3},
    .
    .
    {label: "Dec", value: 12}
];

score 4 · Answer 1 · answered Nov 01 '19 at 11:11

4

Add [filter]="true" [filterBy]="'label'" to your p-dropdown. it will work fine.

answered Nov 01 '19 at 11:11

Sameer Ahmed

160
6

I don't want the search bar to be inside the drop-down options. I want it to be on the outside, on top of the column. Similar to the HTML I provided – Natti Nov 01 '19 at 17:00
then you must be filtering your data in ts file, you have to filter the data by label instead of value. – Sameer Ahmed Nov 02 '19 at 17:06
what if I want to use filterby like this -> [filterBy]="'label','label2'" It gives an error. Any reasons? – developer_user Nov 18 '21 at 10:27

score 0 · Answer 2 · answered Oct 31 '19 at 18:01

0

You have to use property optionLabel, for example -

<p-dropdown formControlName="month" class="dropdownInput" *ngSwitchCase="'month'" optionLabel="label"
[options]="monthLabels"></p-dropdown>

answered Oct 31 '19 at 18:01

Pardeep Jain

84,110
37
165
215

That doesn't work :( It defaults to 'JAN' when I want it to save the inputs. Also it still searches by '1' and not 'Jan' – Natti Oct 31 '19 at 18:39

score 0 · Answer 3 · answered Nov 01 '19 at 21:05

your data need to be of type SelectItem

import {SelectItem } from 'primeng/api';

Component:

monthLabels : SelectItem[];
 this.monthLabels = data.map(item =>
          ({
            label: item.name,
            value: item.id
          }));
      }

Template

<p-dropdown formControlName="month" class="dropdownInput" *ngSwitchCase="'month'"
[options]="monthLabels" [filter]="true" ></p-dropdown>

there is a great example https://stackblitz.com/edit/primeng-dropdown

Prime NG: Search dropdown by label

3 Answers3