select2 - ocultando a caixa de pesquisa

Para minhas seleções mais significativas, a caixa de pesquisa no Select2 é maravilhosa. No entanto, em um exemplo, tenho uma seleção simples de 4 opções codificadas. Nesse caso, a caixa de pesquisa é supérflua e parece um pouco boba por estar presente. É possível escondê-lo de alguma forma? Dei uma olhada na documentação on-line e não consegui encontrar nenhuma opção para isso no construtor.

É claro que eu poderia usar apenas um html select regular, mas por consistência eu gostaria de usar o Select2, se possível.

Consulte este tópico https://github.com/ivaynberg/select2/issues/489 . Você pode ocultar a caixa de pesquisa definindo minimumResultsForSearch com um valor negativo.

$('select').select2({
    minimumResultsForSearch: -1
});

Está na página de Exemplos: https://select2.org/searching#hiding-the-search-box

$(".js-example-basic-hide-search").select2({
  minimumResultsForSearch: Infinity
});

.no-search .select2-search {
    Mostrar nenhum
}

$ ("# test"). select2 ({
    dropdownCssClass: 'sem pesquisa'
}); 

Versão 4.0.3

Tente não misturar os requisitos da interface do usuário com o seu código JavaScript.

Você pode ocultar a caixa de pesquisa na marcação com o atributo:

data-minimum-results-for-search="Infinity"

Marcação

<select class="select2" data-minimum-results-for-search="Infinity"></select>

Exemplo

$(document).ready(function() {
  $(".select2").select2();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<label>without search box</label>
<select class="select2" data-width="100%" data-minimum-results-for-search="Infinity">
  <option>one</option>
  <option>two</option>
</select>

<label>with search box</label>
<select class="select2" data-width="100%">
  <option>one</option>
  <option>two</option>
</select>

A remoção das entradas com o jQuery funciona para mim:

$(".select2-search, .select2-focusser").remove();

Esta é a melhor solução, limpa e funciona bem:

$("#select2Id").select2 () ;
$("#select2Id").select2 ('container').find ('.select2-search').addClass ('hidden') ;

Em seguida, crie uma classe .hidden { display;none; }

Se você deseja ocultar a pesquisa por um menu suspenso específico, use o atributo id para isso.

$('#select_id').select2({ minimumResultsForSearch: -1 });

Se a seleção for mostrar resultados, é necessário usar isso:

$('#yourSelect2ControlId').select2("close").parent().hide();

fecha a caixa de resultados da pesquisa e define o controle invisível

Eu gosto de fazer isso dinamicamente, dependendo do número de opções no select; para ocultar a pesquisa de seleções com 10 ou menos resultados, eu faço:

$fewResults = $("select>option:nth-child(11)").closest("select");
$fewResults.select2();
$('select').not($fewResults).select2({ minimumResultsForSearch : -1 });

//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);

//readonly on all select2 input
$(".select2-search input").prop("readonly", true);

Se você possui vários atributos no seu select, esse hack sujo funciona:

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();
});

consulte os documentos aqui https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets

Se você deseja ocultar na abertura inicial e preencher o menu suspenso via chamada ajax, adicione o seguinte ao bloco ajax na sua declaração select2:

beforeSend: function () 
  {
    $('.select2-search--dropdown').addClass('hidden');
  }

Para mostrá-lo novamente (e focar) depois que sua solicitação ajax for bem-sucedida:

  success: function() {
      $('.select2-search--dropdown').removeClass('select2-search--hide'); // show search bar then focus
      $('.select2-search__field')[0].focus();
  }

Você pode tentar isso

$('#select_id').select2({ minimumResultsForSearch: -1 });

fecha a caixa de resultados da pesquisa e define o controle invisível

Você pode conferir aqui no documento select2 select2 document

A resposta de @Misha Kobrin funciona bem para mim. Então, decidi explicar mais

Você deseja ocultar a caixa de pesquisa e pode fazê-lo com o jQuery.

por exemplo, você inicializou o plug-in select2 em uma lista suspensa com um público-alvo id

element_select = '#audience';// id or class
$(element_select).select2("close").parent().hide();

O exemplo funciona em todos os dispositivos nos quais o select2 funciona.

Editei o select2.min.jsarquivo para definir o select-2__searchcampo de entrada que é gerado readonly="true".

Para a seleção múltipla, é necessário escrever o código js, ​​não há propriedade de configurações.

$('#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);
});

Isso foi mencionado em sua página: https://select2.org/searching#multi-select

tente este CSS

input[aria-controls=select2-product-type-results]{
  display: none;
}

esta entrada é campo de pesquisa