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.


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

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

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>


20

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

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

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


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

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ą


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

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



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

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


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.


0

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


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


0

spróbuj tego CSS

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

to dane wejściowe to pole wyszukiwania

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.