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.
jquery
jquery-select2
EleventyOne
źródło
źródło
hide
Metodę 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).Odpowiedzi:
Zobacz ten wątek https://github.com/ivaynberg/select2/issues/489 , możesz ukryć pole wyszukiwania, ustawiając wartość minimumResultsForSearch na wartość ujemną.
źródło
Infinity
nie 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ę.Jest na ich stronie z przykładami: https://select2.org/searching#hiding-the-search-box
źródło
źródło
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
Przykład
źródło
Usuwanie danych wejściowych za pomocą jQuery działa dla mnie:
źródło
To najlepsze rozwiązanie, czyste i działa dobrze:
Następnie utwórz klasę
.hidden { display;none; }
źródło
Jeśli chcesz ukryć wyszukiwanie konkretnego menu rozwijanego, użyj do tego atrybutu id.
źródło
Jeśli wybierz opcję Pokaż wyniki, musisz użyć tego:
zamyka pole wyników wyszukiwania, a następnie ustawia kontrolę niewidoczną
źródło
Lubię to robić dynamicznie w zależności od liczby opcji w zaznaczeniu; aby ukryć wyszukiwanie zaznaczeń z 10 lub mniej wynikami, wykonuję:
źródło
źródło
źródło
Jeśli masz do wyboru wiele atrybutów, ten brudny hack działa:
zobacz dokumenty tutaj https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets
źródło
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:
Aby następnie wyświetlić go ponownie (i skoncentrować się) po pomyślnym wysłaniu żądania ajax:
źródło
Możesz tego spróbować
zamyka pole wyników wyszukiwania, a następnie ustawia kontrolę niewidoczną
Możesz to sprawdzić tutaj w dokumentach select2 select2
źródło
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
Przykład działa na wszystkich urządzeniach, na których działa select2.
źródło
Zedytowałem
select2.min.js
plik, aby ustawićselect-2__search
pole wejściowe, które jest generowanereadonly="true"
.źródło
W przypadku wielokrotnego wyboru musisz napisać kod js, nie ma właściwości ustawienia.
Wspomniało to na ich stronie: https://select2.org/searching#multi-select
źródło
spróbuj tego CSS
to dane wejściowe to pole wyszukiwania
źródło