select2 - приховування вікна пошуку


206

Що стосується моїх більш значущих виборів, поле пошуку в Select2 чудове. Однак, в одному випадку, у мене є простий вибір 4 важко кодованих варіантів. У цьому випадку поле пошуку є зайвим і виглядає трохи нерозумно присутнім. Чи можна це якось приховати? Я переглянув документацію в Інтернеті і не зміг знайти в конструкторі жодних варіантів цього.

Я, звичайно, міг би просто використовувати звичайний html select, але для послідовності я хотів би використовувати Select2, якщо це можливо.


Дякую за ідею. Хоча я знав про .show () та .hide () в jQuery, мені не спало на думку, що плагін буде працювати далі, якщо я зробив щось подібне поза власними можливостями. Тим не менше, на перший погляд, здається, це працює :)
EleventyOne

Чи можете ви пояснити, що робить метод приховування та як він працює? Ти мені кажеш, що це лише приховує вікно пошуку, тому що це зовсім не так
IcedDante

@IcedDante hideМетод описаний тут: api.jquery.com/hide Поки ви застосовуєте його лише до відповідного селектора, так, він повинен ховати поле пошуку в поодинці. Тим не менш, існують методи, що стосуються плагіну, щоб їх приховати, і я рекомендував би скористатися ними (див. Нижче).
одинадцятьодин

Відповіді:


474

Переглянувши цю тему https://github.com/ivaynberg/select2/isissue/489 , ви можете приховати поле пошуку, встановивши мінімальне значення ResresForSearch на негативне значення.

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

14
Основна проблема, про яку йдеться у квитку на github, - це мобільний телефон, він все ще відображає клавіатуру. Ми замінили select2 на вибрані.
toutpt

2
і це прекрасно перекладається на angular-ui ui-select2!
rhigdon

Дуже зручний варіант! Я використовував його для пошуку 10 і більше варіантів. Немає необхідності в ручному видаленні пошуку.
blazkovicz

@KevinBrown Infinityне є негативним значенням. Ваша редакція не відповідає тексту та коду. Питання, пов'язане з конкретно, вказує, що негативне значення - це правильний підтримуваний підхід. Проблема, пов’язана з також стверджує, що "Високе значення minimalResultsForSearch приховує лише поле пошуку у відкритому виділенні. Але якщо ми наберемо якийсь лист, поки виділення закрите та зосереджено - пошук вискочить, незалежно від того, наскільки високий", і хоча я не можу відтворити цю конкретну проблему у поточній версії це може бути справжньою проблемою у старих версіях. З цих причин я відмовив вашу редакцію.

1
Але це повністю відключає функціональність пошуку.
sudip


34
.no-search .select2-search {
    дисплей: немає
}

$ ("# тест"). select2 ({
    dropdownCssClass: "без пошуку"
}); 

1
+1 Мені це подобається, оскільки він заважає вікню пошуку ненадовго з’являтися в інтерфейсі користувача під час запиту AJAX. це справедливо і для -1 хака.
SimonGates

Це, безумовно, найкраща відповідь на питання, оскільки це дійсно заважає інтерфейсу події, наприклад "пошук ....".
Сарін Суріякоун

5
Працювали чудово, дякую! Просто примітка до будь-яких майбутніх Googleр, для цього потрібна повна версія select2 (select2.full. *), Як зазначено тут: github.com/select2/select2/isissue/2879#issuecomment-149940634
Othyn,

1
Дякую, це те, що я шукав, оскільки навіть при захованому вікні пошуку він дозволяє підтримувати функціональність пошуку, коли ви хочете його програмно викликати: $ ("# myselect"). Select2 ("пошук", "search_value")
nicolas

Дійсно, це найкращий варіант. Як говорить @Othyn, потрібна повна версія select2.full.min.js, як це зафіксовано на веб-сайті: select2.github.io
robbpriestley

26

Версія 4.0.3

Намагайтеся не змішувати вимоги інтерфейсу користувача зі своїм кодом JavaScript.

Ви можете приховати поле пошуку в розмітці з атрибутом:

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

Розмітка

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

Приклад

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

Видалення входів за допомогою jQuery працює для мене:

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

Ідеально, на мобільному телефоні клавіатура не відображається!
Пітер Мейерсон

Це працює для всіх спаднень на сторінці, але я не можу орієнтуватися лише на конкретні спадні меню. Неможливо націлити їх, оскільки вони не є дітьми, які вибирають id2 select2.
Шон Леброн

2
додайте обгортку, щоб вказати
YAMM

3

Це найкраще рішення, чисте і добре працює:

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

Потім створіть клас .hidden { display;none; }


Це, можливо, працювало добре в минулому, але не працює над останньою версією select2.
Метт Браун

3

Якщо ви хочете приховати пошук конкретного спадного меню, використовуйте для цього атрибут id.

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

1

Якщо вибрано показ результатів, потрібно використовувати це:

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

він закриває поле результатів пошуку, а потім встановить керування невидимим


1

Мені подобається робити це динамічно залежно від кількості варіантів у виборі; щоб приховати пошук вибору з 10 або меншими результатами, я роблю:

$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

Якщо у вас вибрано кілька атрибутів, цей брудний злом працює:

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

дивіться документи тут https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets


1

Якщо ви хочете сховатися під час початкового відкриття, і ви заповнюєте спадне меню за допомогою виклику ajax, додайте наступне до блоку ajax у вашій декларації select2:

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

Щоб потім показати його ще раз (і зосередити увагу) після успішного запиту на ajax:

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

1

Ви можете спробувати це

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

він закриває поле результатів пошуку, а потім встановить керування невидимим

Ви можете перевірити тут у select2 документі select2 документа


0

@Misha Kobrin відповідь добре працює для мене, тому я вирішив пояснити це більше

Ви хочете приховати поле пошуку, ви можете це зробити jQuery.

наприклад, ви ініціалізували плагін select2 у спадному меню, що має аудиторію ідентифікатора

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

Приклад працює на всіх пристроях, на яких працює select2.


0

Я відредагував select2.min.jsфайл, щоб встановити select-2__searchполе для введення, яке створюється readonly="true".


0

Для мультиселекції потрібно написати js-код, немає властивості налаштувань.

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

Про це згадується на їх сторінці: https://select2.org/searching#multi-select


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.