select2 - खोज बॉक्स को छिपा रहा है

Question

मेरे अधिक महत्वपूर्ण चयनों के लिए, Select2 में खोज बॉक्स अद्भुत है। हालांकि, एक उदाहरण में, मेरे पास 4 हार्ड-कोडेड विकल्पों का एक सरल चयन है। इस मामले में, खोज बॉक्स शानदार है और थोड़ा मूर्खतापूर्ण दिखाई देता है। क्या किसी तरह इसे छिपाना संभव है? मैंने ऑनलाइन दस्तावेज़ीकरण पर एक नज़र डाली और कंस्ट्रक्टर में इसके लिए कोई विकल्प नहीं खोज सका।

मैं, ज़ाहिर है, बस एक नियमित रूप से HTML का चयन कर सकते हैं, लेकिन अगर मैं संभव हो तो Select2 का उपयोग करना चाहते हैं।

Comments

विचार के लिए आपका धन्यवाद। हालाँकि मुझे jQuery में .show () और .hide () के बारे में पता था, यह मेरे लिए नहीं था कि प्लग-इन काम करता रहेगा अगर मैंने ऐसा कुछ अपने विकल्पों के बाहर किया। फिर भी, पहली नज़र में, यह काम करने लगता है :)

— EleventyOne

क्या आप बता सकते हैं कि छिपाने की विधि क्या है और यह कैसे काम करती है? क्या आप मुझे बता रहे हैं कि यह केवल सर्च बॉक्स को छुपाता है क्योंकि ऐसा बिल्कुल नहीं लगता है

— IcedDante

@IcedDante hideविधि का वर्णन यहां किया गया है: api.jquery.com/hide जब तक आप केवल इसे उपयुक्त चयनकर्ता पर लागू करते हैं, तब तक, इसे अकेले खोज बॉक्स को छिपाना चाहिए। फिर भी, प्लगइन-विशिष्ट तरीके हैं जिन्हें इसे छिपाने के लिए नियोजित किया जा सकता है, जिसे मैं आपको इसके बजाय उपयोग करने की सलाह दूंगा (नीचे देखें)।

— इलेवनटाइने

Answer 1

इस धागे को देखें https://github.com/ivaynberg/select2/issues/489 , आप खोज बॉक्स को एक नकारात्मक मान पर न्यूनतमResultsForSearch सेट करके छिपा सकते हैं।

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

Comments

जीथब पर टिकट में उल्लेखित मुख्य मुद्दा मोबाइल पर है, यह अभी भी कीबोर्ड प्रदर्शित करता है। हमने चुनिंदा 2 को चुनकर प्रतिस्थापित किया है।

— toutpt

और यह पूरी तरह से कोणीय-यूई यूई-चयन 2 में अनुवाद करता है!

— 22

बहुत आसान विकल्प! मैंने इसका उपयोग 10 और अधिक विकल्पों की खोज दिखाने के लिए किया। खोज इनपुट हटाने के लिए मैन्युअल की आवश्यकता नहीं है।

— blazkovicz

@ केविनब्रोर्न Infinityएक नकारात्मक मूल्य नहीं है। आपका संपादन पाठ और कोड से मेल नहीं खाता है। विशेष रूप से जुड़ा मुद्दा बताता है कि एक नकारात्मक मान सही समर्थित दृष्टिकोण है। समस्या से जुड़े मुद्दे पर भी दावा किया गया है "मिनिमम फॉल्सफोरसर्च का उच्च मूल्य केवल खोले गए बॉक्स में सर्चबॉक्स को छिपाता है। लेकिन अगर हम कुछ अक्षर टाइप करते हैं, तो चयन बंद और केंद्रित है - खोज पॉप अप होगी, चाहे कितनी भी ऊंची हो" और हालांकि मैं इस समस्या को पुन: उत्पन्न नहीं कर सकता। वर्तमान संस्करण में, पुराने संस्करणों में वास्तविक समस्या होने की संभावना है। उन कारणों से, मैंने आपका संपादन वापस कर दिया है।

लेकिन, यह खोज की कार्यक्षमता को पूरी तरह से निष्क्रिय कर देता है।

— सुदीप

Answer 2

यह उनके उदाहरण पृष्ठ पर है: https://select2.org/searching#hiding-the-search-box

$(".js-example-basic-hide-search").select2({
  minimumResultsForSearch: Infinity
});

Answer 3

.no-search .select2-search {
    कुछ भी डिस्प्ले मत करो
}

$ ( "# परीक्षण")। Select2 ({
    dropdownCssClass: 'नो-सर्च'
}); 

Comments

+1 मुझे यह पसंद है क्योंकि यह AJAX अनुरोध करने के दौरान खोज बॉक्स को यूआई में संक्षिप्त रूप से प्रदर्शित होने से रोकता है। यह -1 हैक के लिए भी सही है।

— साइमनगेट्स

यह सवाल के लिए निश्चित रूप से सबसे अच्छा जवाब है क्योंकि यह वास्तव में इवेंट ui जैसे "खोज ...." को रोकता है।

— सरीन सूरियाकून

पूरी तरह से काम किया, धन्यवाद! किसी भी भविष्य के Googler के लिए बस एक नोट, इसके लिए चयन 2 पूर्ण संस्करण (select2.full। *) की आवश्यकता होती है, जैसा कि यहां बताया गया है: github.com/select2/select2/issues/2879#issuecomment-1499264634

— Othyn

धन्यवाद, यह वह है जिसे मैं तब से खोज रहा था जब खोज बॉक्स छिपा हुआ था, तब भी जब आप इसे प्रोग्रामिक रूप से कॉल करना चाहते हैं, तो यह खोज फ़ंक्शननलिटी को उपलब्ध रखने की अनुमति देता है: $ ("# myselect")। select2 ("search", "search_value"

— nicolas

वास्तव में यह सबसे अच्छा विकल्प है। जैसा कि @ ऑइन का कहना है कि पूर्ण संस्करण को select2.full.min.js की आवश्यकता है जैसा कि वेबसाइट पर प्रलेखित है: select2.github.io

— robbpriestley

Answer 4

संस्करण 4.0.3

उपयोगकर्ता इंटरफ़ेस आवश्यकताओं को अपने जावास्क्रिप्ट कोड के साथ न मिलाने का प्रयास करें।

आप विशेषता के साथ मार्कअप में खोज बॉक्स छिपा सकते हैं:

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>

Answer 5

मेरे लिए jQuery के काम के साथ इनपुट हटाना:

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

Comments

बिल्कुल सही, मोबाइल पर कीबोर्ड प्रदर्शित नहीं होता है!

— बजे पीटर मेयरसोन

यह पृष्ठ पर सभी ड्रॉपडाउन के लिए काम करता है, लेकिन मैं केवल विशिष्ट ड्रॉपडाउन को लक्षित नहीं कर सकता। चयनित 2 आईडी के बच्चे नहीं होने के कारण उन्हें लक्षित नहीं किया जा सकता।

— शॉन लेब्रोन

निर्दिष्ट करने के लिए एक आवरण जोड़ें

— YAMM

Answer 6

यह सबसे अच्छा समाधान है, स्वच्छ और अच्छा काम:

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

फिर, एक वर्ग बनाएँ .hidden { display;none; }

Comments

यह अतीत में अच्छी तरह से काम कर सकता है, लेकिन select2 के नवीनतम संस्करण पर काम नहीं करता है।

— मैट ब्राउन ने

Answer 7

यदि आप किसी विशिष्ट ड्रॉप डाउन के लिए खोज छिपाना चाहते हैं तो उसके लिए आईडी विशेषता का उपयोग करें।

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

Answer 8

यदि चयन शो परिणाम है तो इसका उपयोग करना होगा:

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

यह खोज परिणाम बॉक्स को बंद कर देता है और फिर नियंत्रण को अदृश्य रूप से सेट करता है

Answer 9

मुझे यह चयन में विकल्पों की संख्या के आधार पर गतिशील रूप से करना पसंद है; 10 या उससे कम परिणामों वाले चयनों की खोज को छिपाने के लिए, मैं यह करता हूं:

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

Answer 10

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

Answer 11

//readonly on all select2 input
$(".select2-search input").prop("readonly", true);

Answer 12

यदि आपके पास अपने चयन में बहु विशेषता है, तो यह गंदा हैक काम करता है:

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

Answer 13

यदि आप प्रारंभिक उद्घाटन पर छिपना चाहते हैं और आप अजाक्स कॉल के माध्यम से ड्रॉपडाउन को पॉपुलेट कर रहे हैं, तो अपने चयन 2 घोषणा में अजाक्स ब्लॉक में निम्नलिखित जोड़ें:

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

आपके अजाक्स अनुरोध के सफल होने के बाद फिर से (और फ़ोकस) दिखाने के लिए:

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

Answer 14

आप यह कोशिश कर सकते हैं

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

यह खोज परिणाम बॉक्स को बंद कर देता है और फिर नियंत्रण को अदृश्य रूप से सेट करता है

आप यहाँ select2 डॉक्यूमेंट select2 डॉक्यूमेंट में देख सकते हैं

Answer 15

@ मीशा कोब्रिन का जवाब मेरे लिए अच्छा काम करता है इसलिए मैंने इसे और समझाने का फैसला किया है

आप खोज बॉक्स को छिपाना चाहते हैं जिसे आप jQuery द्वारा कर सकते हैं।

उदाहरण के लिए, आपने id दर्शकों वाले एक ड्रॉप डाउन पर select2 प्लगइन को इनिशियलाइज़ किया है

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

उदाहरण उन सभी उपकरणों पर काम करता है जिन पर चयन 2 काम करता है।

Answer 16

मैंने select2.min.jsउस select-2__searchइनपुट फ़ील्ड को सेट करने के लिए फ़ाइल को संपादित किया जो कि उत्पन्न होती है readonly="true"।

Answer 17

Multiselect के लिए आपको js code लिखना है, कोई सेटिंग प्रॉपर्टी नहीं है।

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

Answer 18

इस सीएसएस की कोशिश करो

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

यह इनपुट खोज फ़ील्ड है