javascript - 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