Posts Learn Components Snippets Categories Tags About
/

How to hide search box in select2

Learn how to hide the search box when the select dropdown is open in select2 library

Created on Aug 30, 2021

13 views

In this short snippet, you will learn how to hide the search box on the select2 dropdown.

Hide Search box in Single select


In order to hide the search box in select2, you can hide the search box by setting "minimumResultsForSearch" to a negative value.
$('select').select2({
    minimumResultsForSearch: -1
});
Otherwise, you can set the value to infinity like the following.
$("#select").select2({
    minimumResultsForSearch: Infinity
});

Hide Search box in Multi-select


To hide the search box in multi-select you can write your code like below.
$('select').select2();

$('#select').on('select2:opening select2:closing', function( event ) {
    var $searchfield = $(this).parent().find('.select2-search__field');
    $searchfield.prop('disabled', true);
});
Thanks for stopping by and if you find this snippet helpful, do make sure to share it with your friends. Cheers!

Snippets by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

Load comments for How to hide search box in select2

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components

Other Code Snippets

More