CODEWITHSUNDEEP
angular
klteenathayalan lal
klteenathayalan lal

Reputation: 1

Drop down issue in angular

I am having an issue in my dropdown box, it showing empty. But in console its showing value.This is my code

 <p-autoComplete [(ngModel)]="cdsidvalue" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="name" [size]="16"
                        placeholder="CDSID" [minLength]="1"></p-autoComplete>

filteredCountriesSingle: any[];
  countries: any[];


 this.adminentrylistSearch=[


        {cdsid: '0121', firstname: 'FirstName1', lastname: 'LastName1' ,fullname:"LastName1, FirstName1"},
        {cdsid: '0122', firstname: 'FirstName1', lastname: 'LastName2' ,fullname:"LastName2, FirstName2"},
        {cdsid: '0123', firstname: 'FirstName3', lastname: 'LastName3' ,fullname:"LastName3, FirstName3"},
        {cdsid: '0124', firstname: 'FirstName4', lastname: 'LastName4',fullname:"LastName4, FirstName4"},
        {cdsid: '0125', firstname: 'FirstName5', lastname: 'LastName5',fullname:"LastName5, FirstName5"},
        {cdsid: '0126', firstname: 'FirstName6', lastname: 'LastName6',fullname:"LastName6, FirstName6"},
        {cdsid: '0127', firstname: 'FirstName7', lastname: 'LastName7',fullname:"LastName7, FirstName7"},
       }
filterCountrySingle(event) {
    let query = event.query;

    this.filteredCountriesSingle = this.filterCountry(query, this.adminentrylistSearch);

  ];

  filterCountry(query, adminentrylistSearch: any[]):any[] {
    //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
    let filtered : any[] = [];
    for(let i = 0; i < adminentrylistSearch.length; i++) {
      let country = adminentrylistSearch[i];
      if(country.cdsid.indexOf(query) == 0) {
        console.log("country="+country.cdsid);
        filtered.push(country);
      }
    }
    return filtered;
  }

below image for understanding

Upvotes: 0

Views: 62

Answers (2)

Sunil
Sunil

Reputation: 11243

There is wrong configuration in your html. Make the following changes

 <p-autoComplete [(ngModel)]="cdsidvalue" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="firstname" [size]="16"
                        placeholder="cdsid" [minLength]="1"></p-autoComplete>

If you want to customize it further

Below template will display the First Name and Last Name.

<p-autoComplete [(ngModel)]="cdsidvalue" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="name">
  <ng-template let-item pTemplate="item">
    {{item.firstname}} {{item.lastname}}
  </ng-template>
  <ng-template let-item pTemplate="selectedItem">
    {{item.firstname}} {{item.lastname}}
  </ng-template>
</p-autoComplete>

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222582

The problem is you are binding the field as name which does not exist in your array, you need to provide a field which exists as follows,

 <p-autoComplete [(ngModel)]="cdsidvalue" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="firstname" [size]="16"
 placeholder="CDSID" [minLength]="1"></p-autoComplete>

STACKBLITZ DEMO

Upvotes: 1

Related Questions