Display user data from api based on search value using angular primeng

Question

I am working on Angular 7 application using angular primeng and new to Angular. This is the scenario.

a) Fetched user data from external api but i need to display user based on the input search. I tried to read the following documentation "Multiple" select https://www.primefaces.org/primeng/#/autocomplete but not able to display value based on the search.

b) I have added Add button on the right side of search section. Upon clicking the add button, user should be displayed below it.

Please see the code snippet. home.component.html

<div class="ui-g">
      <div class="ui-g-9">
        <p-autoComplete [(ngModel)]="patients" [suggestions]="filteredUsersMultiple" (completeMethod)="filterCountryMultiple($event)"
          [minLength]="1" placeholder="Users" field="name" [multiple]="true">
        </p-autoComplete>
        <ul>
            <li *ngFor="let c of patients">{{c}}</li>
        </ul>
      </div>
      <div class="ui-g-3">
        <button pButton type="button" label="Add" class="ui-button-secondary"></button>
      </div>    
    </div>

country.service.ts

export class CountryService {

  constructor(private http: HttpClient) { }

  getUsers() {
    return this.http.get('https://jsonplaceholder.typicode.com/users');
  }
}

home.component.ts

filterCountryMultiple(event) {
    this.userService.getUsers().subscribe(
      (val: any[]) => {
        this.filteredUsersMultiple = val.map(user => user.username);
        console.log(this.filteredUsersMultiple);
      }
    )
  }

It would be really helpful if somebody could help me to find on how to display user data based on searching and display it when clicking Add button.

Unknown Unknown · Accepted Answer · 2019-05-02T05:20:08

As per the doc https://www.primefaces.org/primeng/#/autocomplete use completeMethod to query for the results. The event contains the query text. Then create a search function and compare both query and the filteredUsersMultiple.

filterCountryMultiple(event) {
    let query = event.query; 
    this.userService.getUsers().subscribe(
      (val: any[]) => {
        this.filteredUsersMultiple = val.map(user => user.username);
        this.checkUsers = this.mySearch(query, this.filteredUsersMultiple);
      });
  }

  mySearch(query, filteredUsersMultiple: any[]):any[] {
    let filtered : any[] = [];
    for(let i = 0; i < filteredUsersMultiple.length; i++) {
      let data = filteredUsersMultiple[i];
      if(data.toLowerCase().indexOf(query.toLowerCase()) == 0) {
          filtered.push(data);
      }
  }

Display user data from api based on search value using angular primeng

1 Answers