Search code examples
javascriptjqueryjquery-select2

Select2 - Multiple select keep the search box in front of the input


I'm trying to keep the searchbox on top of the input when creating a Select2 multiselect. The searchbox always is the last selected option in the list but I'd like to have it as the first option is there any way to do that?

enter image description here

I'd like to make it appear as the first option so that when the list is longer you can actually select from the top rather than scrolling to the bottom to see the dropdown.


Solution

  • Fixed it by doing the following

    var searchfield = $(this).find('.select2-search--inline')
    var selection = $(this).find('.select2-selection__rendered')
    $(this).find('.select2-search__field').html("")
    selection.prepend(searchfield)