Dynamically add chips on enter

[ONG YU FENG]

Hi there, im trying to find similar component like angular chip but i cant seems to find a example of similar here

Basically when user types in text and press enter, it gets added to the chip list. Could you provide an example or link to the demo page?

thanks

[Keerthana Rajendran]

Hi ONG YU FENG, 

 

Thanks for contacting Syncfusion support. 

 

Query : I’m trying to find similar component like angular chip but i cant seems to find an example of similar here 

 

Please find the demo and UG links for React Chip component below  

 

Demo: https://ej2.syncfusion.com/react/demos/#/material/chips/default/ 

 

UG: https://ej2.syncfusion.com/react/documentation/chips/getting-started/ 

 

Query: Basically when user types in text and press enter, it gets added to the chip list. Could you provide an example or link to the demo page? 

 

We have EJ2 MultiSelect component with filtering similar to your requirement. Please refer to the below links to more details on MultiSelect component. 

 

Demo: https://ej2.syncfusion.com/react/demos/#/material/multi-select/filtering 

 

UG: https://ej2.syncfusion.com/react/documentation/multi-select/filtering/ 

 

Please let us know if you need further assistance.  

 

Regards, 

Keerthana.  

[ONG YU FENG]

Thanks for the reply, the one suggested by you on  EJ2 MultiSelect component is pretty much close to what i need. But i do not need the drop down list function. is there anyway to remove the dropdown function?

[ONG YU FENG]

Hi

Maybe a better example:

Is there any way to replicate like the one above?

[Berly Christopher]

Hi ONG YU FENG, 

  

Thanks for sharing information to us.  

  

We can achieve the requested requirement with help of popupWidth and popupHeight as 0px and make the below styles in the popup content as mentioned below. 

  

  <MultiSelectComponent 

  id="customelement" 

  dataSource={this.gameList} 

  fields={this.fields} 

  mode="Box" 

  cssClass="e-custom" 

  popupWidth="0px" 

  popupHeight="0px" 

  placeholder="Favorite sports" 

  allowCustomValue={true} 

/> 

.e-custom .e-dropdownbase.e-content { 

  overflow: hidden  

} 

 

  

Sample Link: https://stackblitz.com/edit/react-vewcus-bdz3gh?file=index.js  

  

Regards, 

Berly B.C 

[ONG YU FENG]

Thanks for your reply

I have seen the example and this is what i want. however, i still able to see part of the dropdown list even tho the popup width and height is set to 0px

how do i remove the dropdownlist entirely? thanks

[Berly Christopher]

Hi ONG YU FENG, 

  

We have modified the sample based on the requested requirement and attached it below. 

  

.e-custom .e-content.e-dropdownbase.e-nodata { 

  display: none; 

} 

 

  

Sample Link: https://stackblitz.com/edit/react-vewcus-qwljfc?file=index.css  

  

Regards, 

Berly B.C