How to show search result in primeng dropdown

Question

I am trying to show search results after typed input text length more than 3 If it is text length less 3 I want to hide the search result area.I can use only inputId for identifier.How to achive this in priming dropdown.

app.component.html:

<p-dropdown 
  [options]="cars"
  inputId="listDDOne"
  [(ngModel)]="selectedCar"
  [style]="{'width':'100%'}"
  scrollHeight="400px"
  filter="true"
  resetFilterOnHide="true"
  (keydown.enter)="MyKeydownEnter($event)"
  (keydown)="MyKeydown($event)"
  (onChange)="OnChange($event)">
  <ng-template let-item pTemplate="selectedItem">
    {{item.label}}
   </ng-template>
   <ng-template let-car pTemplate="item">
    <div class="drop-item"
      (click)="MyItemClick($event)">

      <span class="drop-item-label"
        [ngClass]="car.disabled ? 'disabled' : ''">
        {{car.label}}
      </span>

      <span class="drop-item-value"
        [ngClass]="car.disabled ? 'disabled' : ''">
        {{car.value}}
      </span>
    </div>
    </ng-template>    
 </p-dropdown>

app.component.ts:

MyKeydown(event) {
console.log("MyKeydown", event.value);

if(event.value.length>3){ 
  event.stopPropagation();
  event.preventDefault(); 

  ????
} 
}

stackblitz demo

this is not possibe you can't pass th cutome filter method to the component — malbarmavi, Mar 18 '20 at 08:04

Joel · Answer 1 · 2020-03-17T14:38:42.933

0

You can use [hidden] for this.

Just return a boolean if the length is >= 3.

[hidden]="ShowDropdown($event)"

App component:

ShowDropdown(event) {
    return event.value.length >= 3;
    //same as 
    //return event.value.length >= 3 ? true : false;
}

Or inline it in the HTML (should be equivalent) :

[hidden]="$event.value.length >=3"

edited Mar 17 '20 at 14:38

answered Mar 17 '20 at 14:30

Joel

3,791
1
25
41

What are you applying the hidden tag to? – Joel Mar 17 '20 at 15:55
Please understand about my question.I can not add hidden attr..I can use only inputId part of priming – Makizh Mar 18 '20 at 06:38
dropdown item will be hidden by the component internal search method so it's better if we don't try to add a logic to hide it – malbarmavi Mar 18 '20 at 09:29
I still thing the autocomplate component is better than the dropdwon – malbarmavi Mar 18 '20 at 09:29

score 0 · Answer 2 · answered Mar 18 '20 at 09:25

I think primeng autocpmplate is better here that rty to make dropdown component act like autocomplate , with autocomplate compoennt you can set the minume length of the text query

template

<p-autoComplete 
   [minLength]="3" 
   [dropdown]="true" 
   [(ngModel)]="selectedValue" 
   field="label" 
   [suggestions]="result" 
   (completeMethod)="search($event)" >
</p-autoComplete>

you just need to provid the serach method like this

component

  search({ query = "" }) {
    if (query == "") {
      this.result = [...this.cars];
    } else {
      this.result = this.cars.filter(c =>
        c.label.toLowerCase().includes(query.toLowerCase())
      );
    }
  }

demo

Not working using onkeyup event: https://stackblitz.com/edit/angular-primeng-autocomplate-pwxkyk?file=src/app/app.component.ts — Makizh, Mar 18 '20 at 10:20
why you need `onKeyUp` the search method will work when the length more than 3 and there is other method like select — malbarmavi, Mar 18 '20 at 10:23

How to show search result in primeng dropdown

2 Answers2