Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #101637
    Gourav
    Member

    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.
     

    #101642
    yavordashew
    Member

    Hi Gourav,
    The comboboxcomponent 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/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.