Size attribute of select

How Do I...
#1

Hi,

I have a simple question.

How can I do something like this :
image
But with a search bar ?

Thanks !
Clement

#2

Select2 will give you the “search bar”, but by default Select2 displays as a dropdown, not a listbox. However, by using some of the configuration options and events that Select2 , I think you can do what you’re asking. You need to modify Select2’s default behavior in four ways:

  1. You need to make the dropdown open as soon as the Select2 is initialized, simulating the look of a listbox [but see item #2 below]. You can do this programmatically by calling the select2("open") method. Ideally you’d want to do this as soon as the Select2 has finished initializing.
  2. You need to make the “listbox” (really a dropdown) take up space in the flow of the page. By default the Select2 dropdown overlays the content on the page, just like a plain HTML <select size="1"> (which is what Select2 emulates, only with more features). To do that requires a combination of CSS and JavaScript (because some of the styling is inline, which only Javascript can change—CSS can’t override inline styling), and since it must be done after the Select2 is opened, you have to do it in an event handler. See the code samples below for details.
  3. You need to keep the dropdown open after the user makes a selection. By default, the dropdown closes when the user makes a selection You can do that by setting the “closeOnSelect” configuration option to false.
  4. You need to prevent the dropdown from closing if the user clicks on the down-arrow or the current selection that is displayed above the dropdown. You can do this with an event handler for the “select2:closing” event, which you can cancel by returning false.

Something like this will work (here is a working example: https://codepen.io/John30013/pen/PrqNzV):

Javascript:

$(document).ready(function() {
  // Initialize the widget.
  $(".select2").select2({
    closeOnSelect: false,
    dropdownParent: $("#select2-container")
  });
  // Prevent it from closing if the user clicks the down arrow/selected item box.
  $(".select2").on("select2:closing", function(event) {
    event.preventDefault();
    return false;
  });
  // Overwrite inline styles after the dropdown opens.
  $(".select2").on("select2:open", function(event) {
    $(".select2-container").css({
      display: "block",
      position: "static",
      top: 0,
      left: 0
    });
  });
  // Open the dropdown.
  $(".select2").select2("open");
});

CSS:

.select2-dropdown {
  position: static;
  z-index: 0;
}