JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › ComboBox › Autocomplete With List of Objects › Reply To: Autocomplete With List of Objects
March 19, 2021 at 5:12 pm
#101642
Member
Hi Gourav,
The combobox
component does not support the exact same functionality you aim to achieve.
However one way to do so is to use inputMember
property to show in the input of the combobox.
Little code snippet on how to do this:
In your app.component.ts file:
export class AppComponent implements AfterViewInit, OnInit {
@ViewChild('combobox', { read: ComboBoxComponent, static: false }) combobox: ComboBoxComponent;
ngOnInit(): void {
// onInit code.
}
ngAfterViewInit(): void {
// afterViewInit code.
this.init();
}
init(): void {
// init code.
comboBox.dataSource = [
{label: 'Affogato' ,
value: 'fruit',
group : 'Affogato fruit'
},
{
label: 'Americano' ,
value: 'fruit',
group : 'Affogato fruit'
},
{label: 'Breve',
value: 'fruit',
group : 'Affogato fruit' },
{
label: "Café Crema",
value: 'fruit',
group : 'Affogato fruit'
}
]
this.combobox.inputMember = 'group';
}
And in you app.component.html file :
<smart-combo-box #combobox [selectionMode]="'zeroOrMany'" [selectionDisplayMode]="'tokens'"
[placeholder]="'Select items:'" ></smart-combo-box>
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/