Question T15375
Visible to All Users
Duplicate

We have closed this ticket because another page addresses its subject:

Draw a right circle around a correct Radiogroup option

How to replicate a Select2 using the JQuery version of SurveyJS

created a year ago

Hello,

Using the JQuery version of surveyJS, I'm trying to see if I can replicate something similar to the "Select2" dropdown.
Here is an example of what it looks like and what I'm trying to replicate with surveyJS :
Clipboard-File-1.png

In order to do so, I have tried out multiple things without prevailing with any of them which are :

  • Trying to create a "dropdown"

For this solution the issues were that I could enable a search but neither could I add "custom values" or customize the "item templates" for the choices

  • Trying to create a "tagbox"

This is the closest I have gotten where I have a tagbox with max 1 selection however, allowNewTags and a choicesByUrl however, here again, the issues I faces were that the tagbox isn't very pleasing to the eye when you know you can only "select 1 tag" and, once more, I could not figure out how to update the "item templates" for the choicesByUrl

  • Trying to create a "custom widget"

I have tried out everything from this page Custom Widget however I have not been able to get even remotely close to anything, I think if I have the source code of the whole project where the screenshots were used I would have a better overview of what is done but just with this article I couldn't get anything nice

  • Trying to create a "html"

This one gave me the most hope since it would allow me to use, for example, other libraries and their select boxes however, after some research, it seems those aren't for question but rather just to display some stuff like images and text so I dropped the idea.

So here is my question, could you help me figure out how I can get something similar to the Select2 using JQuery with surveyJS please ? I'm truly out of ideas and when I found the Dropdown Box With Custom Items I thought that was it but it doesn't seem to be available in JQuery.

Thanks a lot in advance for your assistance and if you need any more information about this issue, please feel free to ask and I'll get back to you asap.

Best Regards,

Yves

PS : I tried also for a bit the "renderAs" but it didn't seem to render anything but the default "dropdown"

Answers approved by surveyjs Support

created a year ago (modified a year ago)

Hello Yves,
Thank you for reaching out to us.

Unfortunately, none of the built-in survey questions, such as Dropdown or TagBox, currently support the addition of custom values to the list.

However, if you wish to customize item templates for both Dropdown and TagBox questions, you can do so by registering a custom itemComponent: Drop-Down Menu with Custom Item Template. Unfortunately, the demo doesn't contain a jQuery integration, however, you can use the Knockout integration as an example and proceed with jQuery integration.

If you wish to allow users to select items from a predefined list and also add custom values to the list, consider using a custom widget which integrates a jQuery Select2 widget within a SurveyJS Form Library.

In fact, we already have such widgets available with the surveyjs-widgets library:

Enable the allowAddNewTag option to allow users add new tags to a Tag Box Select2 widget. Please refer to the following demo: View Plunker (Form Library for jQuery).

I hope this helps. Should you have any further questions, we are always here to help.

Thanks

    Show previous comments (5)

      Hello Yves,
      The allowAddNewTag option is available only if you integrate a Select2 TagBox widget within a SurveyJS Form Library (View Plunker (Form Library for jQuery).

      However, the allowAddNewTag option is not available with the SurveyJS Dropdown and TagBox components. The demo I shared in my previous comment uses the Dropdown/TagBox questions available out of the box with the SurveyJS Form Library. These question types do not currently support adding new items. Therefore, the allowAddNewTag option is not applicable for these questions. To allow users enter other values which are not in a list, enable the Other option ("showOtherItem": true).

      I hope this clarifies the situation. Please consider the option which is better suits your needs.

      Thanks

        Hello Jane,

        Ok I'll do that, thanks a lot for your help regarding this issue, it was very helpful and insightful.

        Best regards,

        Yves

          You're very welcome, Yves! Should you have any further questions, please feel free to contact us at your convenience.

          And before I let you go…If you have free time, we would greatly appreciate it if you could provide a brief feedback on our SurveyJS page at g2.com. Your feedback will help us build trust with potential customers.

          Thank you in advance,
          Jane