Select2 start with input field instead of dropdown

Question

I use the js library select2. This is a screenshot of what I have now:
Start:

Click on dropdown:

Now is it possible to have an input field to start with and not directly a dropdownlist? I know it's possible because you can find it on the select2 site. An example is this:

But the documentation is very brief. This is what I have now:

<input type="text" name="questions[question1]" id="question1" class="question1" style="width:500px"/> 

function createQuestionTags(data, question_number){   $(".question" + question_number).select2({     createSearchChoice: function (term, data) {       if ($(data).filter(function () {         return this.text.localeCompare(term) === 0;       }).length === 0) {         return {           id: term,           text: term         };       }     },     data: data,     placeholder: "Enter Question",     allowClear:true   }); } 

(The data is received from an ajax call)

Answer 1

What you are seeing is actually a multi-select or multi-value drop down box in that example. It is not a single value drop down box like you are using in your code. Per the Select2 website, select2 will detect that you are trying to use a multi-select box and will automatically apply that styling instead of the default (drop down arrow, etc.).

If you in fact need a single value drop down box, there is no direct way to make it display with the formatting of the multi-select so that it looks like a regular input box. There may be a way to fake it by adding or removing CSS classes. I played around a bit but couldn't find one.

Since you don't want the formatting, the search box, or the multi-select capability (I'm assuming) you probably don't need to use the select2 library.

Update: It looks like you're not the first person to try to do this. They plan to add this feature but it might be a while: https://github.com/ivaynberg/select2/issues/1345

Answer 2

The only workaround that I could come up with is to use both multiple: true and maximumSelectionSize: 1 when setting up.

Please see my example here: http://jsfiddle.net/DanEtchy/Lnf8j/