{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 不美不萌又怎样 的问题《Select2 start with input field instead of dropdown》','https://www.manongdao.com/q-188340.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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)
In my case, I wanted the user's selections from the dropdown to appear in a list below the dropdown, rather than working like a regular dropdown list. So this workaround worked for me:
Of course that won't work if you want the selected item to stay selected in select2's input box like it does with a regular select2 multiselect list.
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
I simply formatted a standard input box with CSS to look like a Select2() dropdown:
Custom implementation using Bootstrap styling, simple but functional:
Select2'sminimumInputLength: 1option can hide the dropdown on focus/open...Update: Code cleanup, don't open dropdown on focus.
This is possible in Select2 4.0.0 with the new selection adapters. You can swap out the
SingleSelectionwith aMultipleSelection(including any relevant decorators) and it should behave as expected.By default, Select2 will set up the dropdown to have the search (instead of the selection container) which you will need to override if you want to perfectly emulate a multiple select.