[Fixed] How to group suggestions nested list in the primeng autocomplete angular 8

Issue

I am trying to group the autocomplete suggestions and would like to render them in primeng.

How we can add a custom template in primeng?

my data

data = [{"id":"m1","name":"menu1","val":"D","items":[{"id":"d1","name":"datanested1","val":"D","items":[{"id":"1","name":"direct Data","val":"E"},{"id":"2","name":"test","val":"E"}]}]},{"id":"d2","name":"menu2","val":"D","items":[{"id":"21","name":"test21","val":"E"},{"id":"22","name":"test23","val":"E"}]},{"id":"d3","name":"menu3","val":"D","items":[{"id":"31","name":"test data 3","val":"E"},{"id":"32","name":"test data 4","val":"E"}]}]

Is there any other libraries available in angular 8 which support this?

I would like to achieve something like this when users start searching in autocomplete…

Menu1 - header
 datanested1 -subheader
  direct Data -values
   test        -values

Menu2 - header
 test21-values
 test23-values

Menu3 - header
 test data 3-values
 test data 4-values


1. if the user types "direct" in the input box...

Menu1 - header
 datanested1 -subheader
  direct Data -values

2. if the user types "data" in the input box...

Menu3 - header
 test data 3-values
 test data 4-values

3. if the user types "menu" in the input box...
Menu1 - header
 datanested1 -subheader
  direct Data -values
  test        -values

Menu2 - header
 test21-values
 test23-values

Menu3 - header
 test data 3-values
 test data 4-values

I have tried the following example in stackblitz.

https://stackblitz.com/edit/primeng-7-1-2-qtsnpm

Solution

In the below approach we will reduce the array to a simple structure

[
  {
    "id": "m1",
    "name": "menu1",
    "val": "D",
    "search": ["m1", "d1", "1", "2", "menu1", "datanested1", "direct Data", "test"],
    "depth": 2
  },
  {
    "id": "d1",
    "name": "datanested1",
    "val": "D",
    "search": ["d1", "1", "2", "datanested1", "direct Data", "test"],
    "depth": 1
  },
  {
    "id": "1",
    "name": "direct Data",
    "val": "E",
    "search": ["1", "direct Data"
    ],
    "depth": 0
  },
 ...

]

The idea is this, we will use the depth to format out text while the search for searching.

  maxDepth = 0;
  reducedArray = (arr, depth = 0, parentSearch = []) => {
    this.maxDepth = Math.max(this.maxDepth, depth);
    if (!arr) {
      return [];
    }

    return arr.reduce((prev, { items, ...otherProps }) => {
      // const depth = this.findDepth({ items, ...otherProps });
      const search = [
        ...this.getProps({ items, ...otherProps }, "id"),
        ...this.getProps({ items, ...otherProps }, "name")
      ];
      const newParentSearch = [...parentSearch, otherProps.name, otherProps.id];
      return [
        ...prev,
        { ...otherProps, search, depth, parentSearch },
        ...this.reducedArray(items, depth + 1, newParentSearch)
      ];
    }, []);
  };

  getProps = (item, prop) => {
    if (!item.items) {
      return [item[prop]];
    } else {
      return [
        item[prop],
        ...item.items.map(x => this.getProps(x, prop))
      ].flat();
    }
  };

We can apply styles like below

  getStyle(depth) {
    return {
      color: depth === 0 ? "darkblue" : depth === 1 ? "green" : "black",
      paddingLeft: depth * 7 + "px",
      fontWeight: 800 - depth * 200
    };
  }

I will use reactive programming so I will convert the object to an Observable usinf of operator

  data$ = of(this.reducedArray(this.data));
  filteredData$ = combineLatest([this.data$, this.filterString$]).pipe(
    map(([data, filterString]) =>
      data.filter(
        ({ search, parentSearch }) =>
          !![...search, ...parentSearch].find(x => x.includes(filterString))
      )
    )
  );

We now done, the remaining is to update html

<p-autoComplete [(ngModel)]="cdsidvalue" [suggestions]="filteredData$ | async"
  (completeMethod)="filterString$.next($event.query)" field="name" [size]="16" placeholder="Menu" [minLength]="1">
  <ng-template let-menu pTemplate="item">
    <span 
      [ngStyle]="getStyle(menu.depth)" >{{ menu.name }}</span>
  </ng-template>

</p-autoComplete>

Demo Here

Update

Since we are using reactive programming, refactoring to accept http requests is quite easy, simply replace the observable with an http request

data$ = this.http.get<any[]>("my/api/url");
  filteredData$ = combineLatest([this.data$, this.filterString$]).pipe(
    map(([data, filterString]) =>
      this.reducedArray(data).filter(
        ({ search, parentSearch }) =>
          !![...search, ...parentSearch].find(x => x.includes(filterString))
      )
    )
  );

See this update in action

I have also updated the html to add loading message, we do not want to display a form without data