Hello! The subject of my question is such a select:

enter image description here

In expanded form, it looks like this:

enter image description here

Actually, the problem is that all the plugins for selects that I found have functionality insufficient to implement this form. Where there is a multiselect there is no search field in the drop-down list and vice versa.

Tell me, can such a plugin still exist or, for example, is it realistic to use the select2 plugin, where there are both options separately (multi-select and select with search in the drop-down list), to implement the form according to the design?

    1 answer 1

    I use select2 - yes, it will suit you:

    1. During initialization, he himself looks at whether he is tied to which selector — multiple or single — there is no need to specify this part in the parameters in any way;
    2. The search field is conveniently shown due to the minimumResultsForSearch: 10 parameter minimumResultsForSearch: 10 - this means that with less than 10 options, there will be no field, and starting from 10 there will be.
    3. Checkboxes in select are implemented in two stages. (1) closeOnSelect: false parameter closeOnSelect: false indicate that when clicking on an item, it is not necessary to close the select. And (2) at the expense of the pseudo-element styles ::before complement the select items with checkboxes.

    Styles for checkboxes can be set as follows:

     .select2-results__option { padding-right: 20px; vertical-align: middle; } .select2-results__option::before { content: ""; display: inline-block; position: relative; height: 20px; width: 20px; background-color: red; margin-right: 20px; vertical-align: middle; } .select2-results__option[aria-selected=true]::before { background-color: green; }
    • Vitali, what about checkboxes? I hope I missed something, because I don’t see an opportunity in select2 to make such a select with checkboxes .. - Igor
    • one
      Completed the answer with information on checkboxes. - Vitaly Emelyantsev
    • Vitali, it follows from the first paragraph of your comment (if I understand you correctly) that you should not specify the multiple parameter in the select. I did everything according to your instructions, there were three problems, I’m really waiting for your advice: 1) The search field did not appear 2) When you select several items from the drop-down list, the height of the input selection increases 3) There is no "caret" icon that turns over when the list is opened (can connect it in some way? I didn’t find such an opportunity in the plug-in documentation, cutting it myself, given the fact that selects have a background, I wouldn’t like it) - Igor
    • it is more and more obvious here: codepen.io/Vlastelin/pen/YGpdBp - Igor
    • one
      I will try to convince the customer of this, thanks for the time spent on assistance) - Igor