AutoComplete with Multi select

[PDev]

I have been trying to add Multiselect option within auto Complete using this link 

https://help.syncfusion.com/angular/autocomplete/multiselection

But Somehow i am unable to achieve the same. Below is my code. which is working okay for auto complete 

<ejs-autocomplete id='atcResources' [dataSource]='dsResources' multiSelectMode='delimiter' width='400'

placeholder='Search Resources' (change)="atcResourceChange($event)"></ejs-autocomplete>

[Berly Christopher]

Hi PDev, 

  

Greetings from Syncfusion support. 

  

We have implemented the MultiSelect component separately for selecting the multiple values from the popup. Please refer the below documentation and demo link to know more about the component. 

  

UG Link: https://ej2.syncfusion.com/angular/documentation/multi-select/getting-started/  

  

Demo Link: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/multi-select/default  

  

Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C 

[Pankaj]

HI,
React multiselect showing 2 same chips selected when select an item from Autosuggest dropdown. 
And how to get value and label both from selected chips to save data as an array of objects to db.

[UdhayaKumar Duraisamy]

Hi Pankaj,

Query 1 : React multiselect showing 2 same chips selected when select an item from Autosuggest dropdown.

We couldn’t reproduce the reported issue as per your scenario. We have attached a working sample for your reference, Also we request you to provide additional details about the issue i.e. replication procedure, issue replication sample(or modify the attached sample), etc... Which will help us to validate the issue further and provide you with a better solution.

Query 2 : how to get value and label both from selected chips to save data as an array of objects to db.

We have created a workaround for your query and attached it below. You can get both value and label using an instance of multiselect component. Please refer to the below code snippet and sample for more details.

  render() {

    return (

      <div className="control-pane">

        <h4>Value :</h4>

        <h4 id="displayValue"></h4>

        <h4>Label :</h4>

        <h4 id="displayLabel"></h4>

        <div>

          <MultiSelectComponent

            id="defaultelement"

            dataSource={this.sportsData}

            mode="Default"

            fields={this.fields}

            placeholder="Favorite Sports"

          />

        </div>

        <div>

          <button onClick={myFunction}>Default</button>

        </div>

      </div>

    );

  }

}

function myFunction() {

  var SelectVal = document.getElementById('defaultelement').ej2_instances[0];

  document.getElementById('displayValue').innerHTML = SelectVal.value;

  document.getElementById('displayLabel').innerHTML = SelectVal.text;

}

 

 

Sample : https://stackblitz.com/edit/react-bffpv2?file=index.js

Regards,

Udhaya Kumar D.