Je souhaite effectuer une sélection multiple sur les éléments filtrés en complétant automatiquement . Inspiré du tutorial suivant
Le composant:
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option" multiple>
<mat-checkbox>
{{ option }}
</mat-checkbox>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
J'ai ajouté une balise pour activer la sélection mais cela ne fonctionne pas. Une fois que je filtre et que je sélectionne une option, le menu se ferme et la case à cocher n'est même pas cochée . Y at-il un moyen de faire une multi-sélection dans la saisie semi-automatique? Merci !!
Documentation sur les matériaux angulaires pour les puces inclut un exemple intéressant de la procédure de démarrage avec la saisie semi-automatique à sélections multiples:
<mat-form-field class="example-chip-list">
<mat-chip-list #chipList>
<mat-chip
*ngFor="let fruit of fruits"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(fruit)">
{{fruit}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input
placeholder="New fruit..."
#fruitInput
[formControl]="fruitCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
{{fruit}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
Fondamentalement, vous avez une liste de puces liée à une liste et une entrée de texte qui permet de rechercher dans une liste de saisie semi-automatique.
import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {Component, ElementRef, ViewChild} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MatAutocompleteSelectedEvent, MatChipInputEvent} from '@angular/material';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
/**
* @title Chips Autocomplete
*/
@Component({
selector: 'chips-autocomplete-example',
templateUrl: 'chips-autocomplete-example.html',
styleUrls: ['chips-autocomplete-example.css'],
})
export class ChipsAutocompleteExample {
visible = true;
selectable = true;
removable = true;
addOnBlur = false;
separatorKeysCodes: number[] = [ENTER, COMMA];
fruitCtrl = new FormControl();
filteredFruits: Observable<string[]>;
fruits: string[] = ['Lemon'];
allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];
@ViewChild('fruitInput') fruitInput: ElementRef;
constructor() {
this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
startWith(null),
map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice()));
}
add(event: MatChipInputEvent): void {
const input = event.input;
const value = event.value;
// Add our fruit
if ((value || '').trim()) {
this.fruits.Push(value.trim());
}
// Reset the input value
if (input) {
input.value = '';
}
this.fruitCtrl.setValue(null);
}
remove(fruit: string): void {
const index = this.fruits.indexOf(fruit);
if (index >= 0) {
this.fruits.splice(index, 1);
}
}
selected(event: MatAutocompleteSelectedEvent): void {
this.fruits.Push(event.option.viewValue);
this.fruitInput.nativeElement.value = '';
this.fruitCtrl.setValue(null);
}
private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.allFruits.filter(fruit => fruit.toLowerCase().indexOf(filterValue) === 0);
}
}
Le code est assez simple (filtre basé sur la saisie de texte après chaque caractère saisi, supprimez un élément de la liste, etc.). Bien entendu, cela doit être adapté à vos besoins (par exemple, une fois que vous avez sélectionné un élément, il devrait être filtré pour les prochains résultats de saisie semi-automatique).
Ng2-select, essayez le multiple, https://valor-software.com/ng2-select/ , laissez-moi savoir si c'est ce que vous voulez.
En général, il n'y a pas de bonne norme pour la sélection multiple.