Question

178

Select2 start with input field instead of dropdown

rated 0 times [ 184] [ 6] / answers: 1 / hits: 108733 / 11 Years ago, tue, november 26, 2013, 12:00:00

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

Start:

enter

Click on dropdown:

enter

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:
enter
enter

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)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

marcelofrankiea

Add To Favorites

Follow

Total Points: 200

Total Questions: 96

Total Answers: 101

Location: Tonga

Member since Tue, Nov 30, 2021

3 Years ago

answered 11 Years ago loganl · Accepted Answer

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