select2 - hiding the search box

Question

For my more significant selects  the search box in Select2 is wonderful  However  in one instance  I have a simple selection of 4 hard-coded choices  In this case  the search box is superfluous and looks a little silly being present  Is it possible to hide it somehow  I took a look through the documentation online and couldn t find any options for this in the constructor  I could  of course  just use a regular HTML select  but for consistency  I d like to use Select2 if possible

User · Answer

If you have multi attribute in your select, this dirty hack works:

var multipleSelect = $('select[name="list_type"]');
multipleSelect.select2();
multipleSelect.parent().find('.select2-search--inline').remove();
multipleSelect.on('change', function(){
    multipleSelect.parent().find('.select2-search--inline').remove();
});

see docs here https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets

User · Answer

readonly on all select2 input     select2-search input   prop  readonly   true

User · Answer

You can try this      select id   select2   minimumResultsForSearch  -1       it closes the search results box and then set control unvisible  You can check here in select2 document select2 documents

User · Answer

If you want to hide search for a specific drop down use the id attribute for that       select id   select2   minimumResultsForSearch  -1

User · Answer

Version 4 0 3  Try not to mix user interface requirements with your JavaScript code   You can hide the search box in the markup with the attribute    data-minimum-results-for-search  Infinity   Markup   lt select class  select2  data-minimum-results-for-search  Infinity  gt  lt  select gt    Example   x000D   x000D    document  ready function     x000D        select2   select2    x000D      x000D   lt link href  https   cdnjs cloudflare com ajax libs select2 4 0 3 css select2 min css  rel  stylesheet    gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs select2 4 0 3 js select2 min js  gt  lt  script gt  x000D   x000D   lt label gt without search box lt  label gt  x000D   lt select class  select2  data-width  100   data-minimum-results-for-search  Infinity  gt  x000D     lt option gt one lt  option gt  x000D     lt option gt two lt  option gt  x000D   lt  select gt  x000D   x000D   lt label gt with search box lt  label gt  x000D   lt select class  select2  data-width  100   gt  x000D     lt option gt one lt  option gt  x000D     lt option gt two lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I edited the select2 min js file to set the select-2  search input field that s generated to readonly  true

User · Answer

See this thread https   github com ivaynberg select2 issues 489  you can hide the search box by setting minimumResultsForSearch to a negative value      select   select2       minimumResultsForSearch  -1

User · Answer

If the select is show results one have to use this       yourSelect2ControlId   select2  close   parent   hide      it closes the search results box and then set control unvisible

User · Answer

I like to do this dynamically depending on the number of options in the select  to hide the search for selects with 10 or fewer results  I do    fewResults      select gt option nth-child 11    closest  select     fewResults select2       select   not  fewResults  select2   minimumResultsForSearch   -1

User · Answer

Disable a search on particular selector     my selector   select2       placeholder     REAS todas        tags  true      width  100        containerCssClass   area disable search input     I add new class         readonly prop to selector class     area disable search input input   prop  readonly   true

User · Answer

If you want to hide on initial opening and you are populating the dropdown via ajax call  add the following to the ajax block in your select2 declaration   beforeSend  function                 select2-search--dropdown   addClass  hidden          To then show it again  and focus  after your ajax request is successful     success  function               select2-search--dropdown   removeClass  select2-search--hide       show search bar then focus           select2-search  field   0  focus

User · Answer

Misha Kobrin s answer work well for me So I have decided to explain it more  You want to hide the search box you can do it by jQuery   for example you have initialized select2 plugin on a drop down having id audience   element select     audience     id or class   element select  select2  close   parent   hide      The example works on all devices on which select2 works

User · Answer

This is the best solution  clean and work good        select2Id   select2          select2Id   select2   container   find    select2-search   addClass   hidden       Then  create a class  hidden   display none

User · Answer

no-search  select2-search       display none        test   select2       dropdownCssClass    no-search

User · Answer

It s on their Examples page  https   select2 org searching hiding-the-search-box      js-example-basic-hide-search   select2     minimumResultsForSearch  Infinity

User · Answer

Removing the inputs with jQuery works for me       select2-search   select2-focusser   remove

User · Answer

try this CSS input aria-controls select2-product-type-results     display  none     this input is search field

User · Answer

For multiselect you have to write js code  there is no settings property       js-example-basic-hide-search-multi   select2         js-example-basic-hide-search-multi   on  select2 opening select2 closing   function  event         var  searchfield     this  parent   find   select2-search  field         searchfield prop  disabled   true         This mentioned on their page  https   select2 org searching multi-select

[jquery] select2 - hiding the search box

Examples related to jquery

Examples related to jquery-select2