Comment implémenter une search bar grouping ?

Fermé
Doucina - Modifié le 14 août 2020 à 12:45
Bonjour,

Je travaille avec angular, j'ai une search bar avec des catégories et sous catégories, mais lorsque je tape un mot, la liste complète s'affiche et le mot en question n'est pas séléctionné.
https://i.stack.imgur.com/EsjBL.png

J'aimerais lorsque j'écris le début d'un mot, "rec" par exemple, ça m'affiche tous les mots commençant par rec et le reste de la liste disparaisse (comme sur la photo ci-dessous).
https://i.stack.imgur.com/Df49W.png

J'ai vu qu'il y avait beaucoup de solutions avec Jquery mais je ne travaille pas avec donc j'aimerais réussir à le faire avec ng-zorro ou même simplement du html.
Je travaille avec le code de ng zorro :


import { Component, OnInit, ViewEncapsulation } from '@angular/core';

export interface AutocompleteOptionGroups {
  title: string;
  count?: number;
  children?: AutocompleteOptionGroups[];
}

@Component({
  selector: 'nz-demo-auto-complete-certain-category',
  encapsulation: ViewEncapsulation.None,
  template: `
    <div class="example-input">
      <nz-input-group nzSize="large" [nzSuffix]="suffixIcon">
        <input placeholder="input here" nz-input [(ngModel)]="inputValue" (ngModelChange)="onChange($event)" [nzAutocomplete]="auto" />
      </nz-input-group>
      <ng-template #suffixIcon>
        <i nz-icon nzType="search"></i>
      </ng-template>
      <nz-autocomplete #auto>
        <nz-auto-optgroup *ngFor="let group of optionGroups" [nzLabel]="groupTitle">
          <ng-template #groupTitle>
            <span
              >{{ group.title }}
              <a class="more-link" href="https://www.google.com/search?q=ng+zorro" target="_blank"></a>
            </span>
          </ng-template>
          <nz-auto-option *ngFor="let option of group.children" [nzLabel]="option.title" [nzValue]="option.title">
            {{ option.title }}
          </nz-auto-option>
        </nz-auto-optgroup>
      </nz-autocomplete>
    </div>
  `,
  styles: [
    `
      .certain-search-item-count {
        position: absolute;
        color: #999;
        right: 16px;
      }

      .more-link {
        float: right;
      }
    `
  ]
})
export class NzDemoAutoCompleteCertainCategoryComponent implements OnInit {
  inputValue?: string;
  optionGroups: AutocompleteOptionGroups[] = [];

  constructor(){}

  onChange(value: string): void {
    console.log(value);
  }

  ngOnInit(): void {
    setTimeout(() => {
      this.optionGroups = [
        {
          title: 'mic',
          children: [
            {
              title: 'AntDesign',
            },
            {
              title: 'AntDesign UI',
            }
          ]
        },
        {
          title: 'rec',
          children: [
            {
              title: 'AntDesign UI,
            },
            {
              title: 'AntDesign,
            }
          ]
        },
        {
          title: 'test',
          children: [
            {
              title: 'AntDesign,
            }
          ]
        }
      ];
    }, 1000);
  }
}


EDIT : Ajout des balises de code
EDIT²: Déplacement dans le forum Javascript
Merci d'avance.
A voir également: