JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › ComboBox › Autocomplete With List of Objects
Tagged: Autocomplete using objects
- This topic has 1 reply, 2 voices, and was last updated 3 years, 8 months ago by yavordashew.
-
AuthorPosts
-
March 19, 2021 at 11:40 am #101637GouravMember
Hi,
We want to use auto complete combo box where datasource will be a list of Objects, instead of List String as shown in example.
https://www.htmlelements.com/angular/demos/combobox/auto-complete/
<pre class=”prettyprint prettyprinted”><span class=”pln”>Given in example
</span><span class=”pln”>dataSource </span><span class=”pun”>= </span><span class=”pun”>[</span>
<span class=”str”>”Affogato”</span><span class=”pun”>,</span>
<span class=”str”>”Americano”</span><span class=”pun”>,</span>
<span class=”str”>”Bicerin”</span><span class=”pun”>,</span>
<span class=”str”>”Breve”</span><span class=”pun”>,</span>
<span class=”str”>”Café Bombón”</span>]
We would like to use –
<span class=”pln”>dataSource </span><span class=”pun”>= [
{id: “</span><span class=”str”>Affogato</span><span class=”pun”>”, name: “1”, code: “abc”},
</span>
<pre class=”prettyprint prettyprinted”><span class=”pun”>{id: “</span><span class=”str”>Cafe</span><span class=”pun”>”, name: “2”, code: “def”},</span>
<pre class=”prettyprint prettyprinted”><span class=”pun”>{id: “</span><span class=”str”>J</span><span class=”pun”>ai, name: “3”, code: “hij”}</span>
<span class=”pun”>]</span>
We would like to show should one of the fields on screen, and when user selects the field he should be select complete object.
March 19, 2021 at 5:12 pm #101642yavordashewMemberHi Gourav,
Thecombobox
component does not support the exact same functionality you aim to achieve.
However one way to do so is to useinputMember
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/ -
AuthorPosts
- You must be logged in to reply to this topic.