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:

Answer 1

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:

$('#myselect').select2({
    multiple:true
})
.on('select2:select', function (e) {
    //clear the input box after a selection is made
    $(this).val([]).trigger('change');
});

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.

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/

Answer 3

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 4

Instead of Select2 the better choice would be selectize because Select2 seems dead

The usage is easy:

$('select').selectize(options);

Here is number of examples how to use and customize selectize

Answer 5

Use these properties

$('#placeSelect').select2({
width: '100%',
allowClear: true,
multiple: true,
maximumSelectionSize: 1,   
});

just call this function on onchange event of dropdown

function ResentForMe(){
var _text=$('.select2-selection__rendered li:first-child').attr('title');
$('.select2-selection__rendered li:first-child').remove();
$('.select2-search__field').val(_text);
$('.select2-search__field').css('width','100%');
}

Note: Remove "Multiple" attribute from select

Answer 6

Matt,)

this work

    $('.search-town-flat').select2({
        multiple: true,
        placeholder: "Enter values",
        allowClear: true,
        maximumSelectionLength: 2,
        theme      : "classic"
    }).on('select2:select', function (e) {
        $(this).val([]).trigger('change');
        $(this).val([e.params.data.id]).trigger("change");
    });