it-swarm.asia

select2 - إخفاء مربع البحث

بالنسبة إلى تحديداتي الأكثر أهمية ، يعد مربع البحث في Select2 رائعًا. ومع ذلك ، في حالة واحدة ، لدي اختيار بسيط من 4 خيارات الثابت ترميز. في هذه الحالة ، مربع البحث لا لزوم له ويبدو سخيفا بعض الشيء الحاضر. هل من الممكن إخفاءه بطريقة أو بأخرى؟ ألقيت نظرة على الوثائق عبر الإنترنت ولم أجد أي خيارات لذلك في المُنشئ.

بالطبع ، يمكنني فقط استخدام تحديد html منتظم ، لكن للتناسق أود استخدام Select2 إذا كان ذلك ممكنًا.

176
EleventyOne

راجع هذا الموضوع https://github.com/ivaynberg/select2/issues/489 ، يمكنك إخفاء مربع البحث عن طريق تعيين الحد الأدنى للنتائج على قيمة سالبة.

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

إنه في صفحة الأمثلة الخاصة بهم: https://select2.org/searching#hiding-the-search-box

$(".js-example-basic-hide-search").select2({
  minimumResultsForSearch: Infinity
});
28
Sabin
. لا يوجد بحث. حدد 2 - البحث {
 عرض: لا شيء 
} 
 
 $ ("# test"). select2 ({[
 dropdownCssClass: 'no-search' 
})؛ 
28
xicooc

الإصدار 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>
23
Aaron Hudon

تعمل إزالة المدخلات باستخدام jQuery بالنسبة لي:

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

إذا كنت تريد إخفاء البحث عن قائمة منسدلة محددة ، فاستخدم سمة المعرف لذلك.

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

هذا هو أفضل حل ونظيف وعمل جيد:

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

ثم قم بإنشاء فئة .hidden { display;none; }

3
YWA

إذا كان لديك سمة متعددة في اختيارك ، فإن هذا الاختراق القذر يعمل:

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
ivanbogomolov
//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
Juan Manuel De Castro

إذا كان التحديد هو إظهار النتائج ، فيتعين على المرء استخدام هذا:

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

يقوم بإغلاق مربع نتائج البحث ثم ضبط التحكم غير مرئي

1
MKK
//readonly on all select2 input
$(".select2-search input").prop("readonly", true);
1
Juan Manuel De Castro

أود القيام بذلك بشكل ديناميكي حسب عدد الخيارات في الاختيار ؛ لإخفاء البحث عن تحديدات مع 10 نتائج أو أقل ، أفعل:

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

إجابةMisha Kobrin تعمل بشكل جيد بالنسبة لي لذلك قررت أن أشرح ذلك أكثر

تريد إخفاء مربع البحث الذي يمكنك القيام به عن طريق jQuery.

على سبيل المثال ، قمت بتهيئة المكون الإضافي select2 في قائمة منسدلة تضم جمهور معرف

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

المثال يعمل على جميع الأجهزة التي يعمل select2.

0
Shahbaz

لقد قمت بتحرير ملف select2.min.js لتعيين حقل الإدخال select-2__search الذي تم إنشاؤه على readonly="true".

0
capcom

إذا كنت تريد الاختباء عند الافتتاح المبدئي وكنت تقوم بتعبئة القائمة المنسدلة عبر مكالمة ajax ، أضف ما يلي إلى كتلة ajax في البيان select2 الخاص بك:

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