Dynamically add chips on enter

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

6 Replies 1 reply marked as answer

KR Keerthana Rajendran Syncfusion Team March 18, 2021 07:30 AM UTC

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  
 
 
 
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. 
 
 
 
Please let us know if you need further assistance.  
 
Regards, 
Keerthana.  



OY ONG YU FENG March 19, 2021 03:16 PM UTC

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?


OY ONG YU FENG March 21, 2021 01:09 PM UTC

Hi

Maybe a better example:

Demo
Is there any way to replicate like the one above?


BC Berly Christopher Syncfusion Team March 22, 2021 09:51 AM UTC

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 { 
  overflowhidden  
} 
 
  
  
Regards, 
Berly B.C 


Marked as answer

OY ONG YU FENG March 22, 2021 01:24 PM UTC

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



BC Berly Christopher Syncfusion Team March 23, 2021 08:33 AM UTC

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 { 
  displaynone; 
} 
 
  
  
Regards, 
Berly B.C 


Loader.
Up arrow icon