Here is the attached example lss file

I realised that I needed to include the CSS for the styling .. .my bad

Now all I need to understand is how a survey taker can add items not in the dropdown ... I have looked at the tags: tags but that doesn't seem to work?

Thanks
Dave

The problem is that you did not implement the select2InputTags() function.

Notes:
- You need to click ENTER to accept the custom input.
- If a select2 item is selected, the associated id is stored in the data, not the label.
- As far as I know, the bug reported above about returning to the page is not addressed.




Sample survey attached:

Thank you so much ... It was really starting to bug me.

I have made a couple of adjustments in case anyone else is looking for something like this

The first is to add to the script to press Enter on page load so the question is ready for the participant and the second is to remove the ' ' from the token separator as what we are collecting is hobbies so with it in there - "Stamp collecting" became "Stamp" and "collecting" outside of that this works perfectly.

Thanks again

Dave

Updated Code

<link href=" cdnjs.cloudflare.com/ajax/libs/select2/4.../css/select2.min.css " rel="stylesheet" />

<script src=" cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.js ">

<script src=" rawgit.com/lingceng/d1cd5ca5db9a777b3148...elect2_input_tags.js ">

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){

var e = jQuery.Event( "keydown", { keyCode: 13 } );
$("body").trigger(e);

var data=[ { id: 1, text: 'Option 1' }, { id: 2, text: 'Option 2' }, { id: 3, text: 'Option 3' }, { id: 4, text: 'Option 4' } ];

select2InputTags($('#question{QID} input:text')).select2({
data: data,
width: '95%',
minimumResultsForSearch: -1,
tags: true,
tokenSeparators: ,
placeholder: "...",
multiple: true
});
});
</script>