select2 - ukrywanie pola wyszukiwania

206

W przypadku moich bardziej znaczących zaznaczeń pole wyszukiwania w Select2 jest wspaniałe. Jednak w jednym przypadku mam prosty wybór 4 zakodowanych na stałe opcji. W tym przypadku pole wyszukiwania jest zbędne i wygląda trochę głupio. Czy można to jakoś ukryć? Przejrzałem dokumentację online i nie znalazłem żadnych opcji w konstruktorze.

Mógłbym oczywiście użyć zwykłego wyboru HTML, ale dla zachowania spójności chciałbym użyć Select2, jeśli to możliwe.

EleventyOne
źródło
Dziękuję za pomysł. Chociaż wiedziałem o .show () i .hide () w jQuery, nie przyszło mi do głowy, że wtyczka będzie dalej działać, jeśli zrobię coś takiego poza własnymi opcjami. Niemniej na pierwszy rzut oka wydaje się, że działa :)
EleventyOne,
Czy możesz wyjaśnić, co robi metoda ukrywania i jak działa? Mówisz mi, że ukrywa to tylko pole wyszukiwania, ponieważ wcale tak nie jest
IcedDante,
@IcedDante hideMetodę opisano tutaj: api.jquery.com/hide Tak długo, jak zastosujesz ją tylko do odpowiedniego selektora, tak, powinna ukryć pole wyszukiwania. Niemniej jednak istnieją metody specyficzne dla wtyczek, które można zastosować, aby je ukryć, których poleciłbym zamiast tego (patrz poniżej).
EleventyOne

Odpowiedzi:

474

Zobacz ten wątek https://github.com/ivaynberg/select2/issues/489 , możesz ukryć pole wyszukiwania, ustawiając wartość minimumResultsForSearch na wartość ujemną.

$('select').select2({
    minimumResultsForSearch: -1
});
Blue Smith
źródło
14
Główny problem tutaj, jak wspomniano w bilecie na github, dotyczy telefonu komórkowego, nadal wyświetla klawiaturę. Zastąpiliśmy select2 wybranym.
toutpt
2
i doskonale przekłada się na angi-ui ui-select2!
rhigdon
Bardzo przydatna opcja! Użyłem go, aby pokazać wyszukiwanie 10 i więcej opcji. Nie ma potrzeby ręcznego usuwania danych wyszukiwania.
blazkovicz
@KevinBrown Infinitynie jest wartością ujemną. Twoja edycja powoduje, że tekst i kod nie pasują do siebie. Kwestia związana ze szczególnie wskazuje, że wartość ujemna jest poprawnym obsługiwanym podejściem. Problem związany również z twierdzeniami: „Wysoka wartość minimumResultsForSearch ukrywa tylko pole wyszukiwania w otwartym zaznaczeniu. Ale jeśli wpiszesz literę, gdy zaznaczenie jest zamknięte i skoncentrowane - wyszukiwanie wyskoczy, bez względu na wysokość” i chociaż nie mogę odtworzyć tego konkretnego problemu w obecnej wersji prawdopodobnie będzie to poważny problem w starszych wersjach. Z tych powodów wycofałem twoją edycję.
1
Ale całkowicie wyłącza funkcję wyszukiwania.
sudip
34
.no-search .select2-search {
    Nie wyświetla się
}

$ („# test”). select2 ({
    dropdownCssClass: „brak wyszukiwania”
}); 
xicooc
źródło
1
+1 Podoba mi się, ponieważ zapobiega wyświetlaniu pola wyszukiwania w interfejsie użytkownika podczas tworzenia żądania AJAX. dotyczy to również włamania -1.
SimonGates
Jest to zdecydowanie najlepsza odpowiedź na pytanie, ponieważ naprawdę zapobiega interfejsowi użytkownika zdarzenia, takiego jak „wyszukiwanie ....”.
Sarin Suriyakoon
5
Działa idealnie, dziękuję! Uwaga dla każdego przyszłego Googlera, wymaga pełnej wersji select2 (select2.full. *), Jak podano tutaj: github.com/select2/select2/issues/2879#issuecomment-149940634
Othyn
1
Dzięki, właśnie tego szukałem, ponieważ nawet przy ukrytym polu wyszukiwania pozwala zachować funkcjonalność wyszukiwania, gdy chcesz wywołać ją programowo: $ („# myselect”). Select2 („search”, „search_value”)
Nicolas
Rzeczywiście jest to najlepsza opcja. Jak twierdzi @Othyn, potrzebna jest pełna wersja select2.full.min.js, jak udokumentowano na stronie internetowej: select2.github.io
robbpriestley
26

Wersja 4.0.3

Staraj się nie mieszać wymagań interfejsu użytkownika z kodem JavaScript.

Możesz ukryć pole wyszukiwania w znacznikach za pomocą atrybutu:

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

Narzut

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

Przykład

$(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>

Aaron Hudon
źródło
20

Usuwanie danych wejściowych za pomocą jQuery działa dla mnie:

$(".select2-search, .select2-focusser").remove();
Arkaitz Garro
źródło
Idealnie, na telefonie komórkowym klawiatura nie jest wyświetlana!
Pieter Meiresone
Działa to w przypadku wszystkich menu rozwijanych na stronie, ale nie mogę kierować tylko na wybrane menu rozwijane. Nie może być celem, ponieważ nie są potomkami identyfikatora select2.
Shaun Lebron
2
dodaj opakowanie, aby określić
YAMM
3

To najlepsze rozwiązanie, czyste i działa dobrze:

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

Następnie utwórz klasę .hidden { display;none; }

YWA
źródło
Mogło to działać dobrze w przeszłości, ale nie działa w najnowszej wersji select2.
Matt Browne,
3

Jeśli chcesz ukryć wyszukiwanie konkretnego menu rozwijanego, użyj do tego atrybutu id.

$('#select_id').select2({ minimumResultsForSearch: -1 });
Saifur Rahman
źródło
1

Jeśli wybierz opcję Pokaż wyniki, musisz użyć tego:

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

zamyka pole wyników wyszukiwania, a następnie ustawia kontrolę niewidoczną

MKK
źródło
1

Lubię to robić dynamicznie w zależności od liczby opcji w zaznaczeniu; aby ukryć wyszukiwanie zaznaczeń z 10 lub mniej wynikami, wykonuję:

$fewResults = $("select>option:nth-child(11)").closest("select");
$fewResults.select2();
$('select').not($fewResults).select2({ minimumResultsForSearch : -1 });
Mike Campbell
źródło
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);
Juan Manuel De Castro
źródło
1
//readonly on all select2 input
$(".select2-search input").prop("readonly", true);
Juan Manuel De Castro
źródło
1

Jeśli masz do wyboru wiele atrybutów, ten brudny hack działa:

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

zobacz dokumenty tutaj https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets

ivanbogomolov
źródło
1

Jeśli chcesz ukryć przy pierwszym otwarciu i wypełniasz menu rozwijane za pomocą wywołania ajax, dodaj następujące elementy do bloku ajax w deklaracji select2:

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

Aby następnie wyświetlić go ponownie (i skoncentrować się) po pomyślnym wysłaniu żądania ajax:

  success: function() {
      $('.select2-search--dropdown').removeClass('select2-search--hide'); // show search bar then focus
      $('.select2-search__field')[0].focus();
  }
Andrzej
źródło
1

Możesz tego spróbować

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

zamyka pole wyników wyszukiwania, a następnie ustawia kontrolę niewidoczną

Możesz to sprawdzić tutaj w dokumentach select2 select2

Foram Thakral
źródło
0

Odpowiedź Mishy Kobrin działa dobrze dla mnie. Postanowiłem więc wyjaśnić więcej

Chcesz ukryć pole wyszukiwania, możesz to zrobić przez jQuery.

na przykład zainicjowałeś wtyczkę select2 w menu rozwijanym posiadającym id odbiorców

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

Przykład działa na wszystkich urządzeniach, na których działa select2.

Shahbaz
źródło
0

Zedytowałem select2.min.jsplik, aby ustawić select-2__searchpole wejściowe, które jest generowane readonly="true".

capcom
źródło
0

W przypadku wielokrotnego wyboru musisz napisać kod js, nie ma właściwości ustawienia.

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

Wspomniało to na ich stronie: https://select2.org/searching#multi-select

Faisal Ghaffar
źródło
0

spróbuj tego CSS

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

to dane wejściowe to pole wyszukiwania

Vajiheh habibi
źródło