nielsv nielsv - 9 days ago 5
Javascript Question

Select2 start with input field instead of dropdown

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

Start:

enter image description here

Click on dropdown:

enter image description here

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 image description here
enter image description here

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

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

Comments