टैग के साथ select2 jquery प्लगइन के साथ: सच है, आप पहले से चुने गए ड्रॉपडाउन में विकल्पों को दिखाने से कैसे रोक सकते हैं?

Question

मैं एक और प्लगइन से select2 to use as a tagging plugin पर माइग्रेट कर रहा हूं लेकिन एक अंतर है जिसे मैं समझने की कोशिश कर रहा हूं कि चयन 2 का समर्थन कर सकता है या नहीं।

एक उदाहरण देखें। कहते हैं कि विकल्प (Ajax अनुरोध से सर्वर साइड वापस आ रहा) की मेरी सूची

"Dog", "Cat", "Monkey", "Giraffe" 

मैं उपयोग कर रहा हूँ पुराने प्लगइन में है, के बाद मैं विकल्पों में से एक का चयन (देता है कहते हैं कि "बिल्ली") की सुविधा देता है और यह में दिखाई देता है टेक्स्टबॉक्स, अगली बार जब मैं एक ही आंशिक स्ट्रिंग ("सीए" कहता हूं) की खोज करता हूं, तो यह "टी" है "कैट" विकल्पों के ड्रॉपडाउन में दिखाई देता है (जैसा कि यह पता है कि आपने इसे पहले ही चुना है)

ऐसा लगता है कि चयन 2 अभी भी ड्रॉपडाउन में आइटम दिखाता है, भले ही आपने इसे पहले से चुना है। चयन 2 आपके द्वारा दर्ज किए जाने के बाद प्रवेश करने से रोकता है लेकिन यह थोड़ा अनजान लगता है इसलिए मैं यह पता लगाने की कोशिश कर रहा हूं कि कोई रास्ता है या नहीं चयन 2 के लिए उसी व्यवहार को दोहराने के लिए अन्य प्लगइन से ior (जहां विकल्प भी दिखाई नहीं देते हैं)

इस काम का सही उदाहरण के रूप में, एक प्रश्न का स्टैक ओवरफ्लो टैग अनुभाग भी सही काम करता है। अगर मैं इस प्रश्न के लिए टैग की मेरी सूची में "jquery" जोड़ता हूं और फिर "jquery" की खोज करता हूं, तो यह DOESN "टी दिखाता है कि सूची में (जैसा कि इसे पहले से चुना गया है)। यही वह व्यवहार है जिसे मैं देख रहा हूं के लिए

यहाँ है मेरे वर्तमान Select2 कोड:।

एचटीएमएल:

<select id="Tags" name="Tags" multiple="multiple"> 
</select> 

जावास्क्रिप्ट:

function SetupAppTags() { 
$("#Tags").select2({ 
    theme: "classic", 
    width: "98%", 
    tags: true, 
    ajax: { 
     url: "/Tag/Search", 
     dataType: 'json', 
     delay: 300, 
     data: function(params) { 
      return { q: params.term }; 
     }, 
     processResults: function(data, params) { 
      return { results: data }; 
     }, 
     cache: false 
    }, 
    escapeMarkup: function(markup) { return markup; }, 
    minimumInputLength: 3, 
    templateResult: tagFormatResult, 
    templateSelection: tagSelectionResult 
}); 
} 

function tagFormatResult(tag) { 

    if (tag.loading) { 
    return "Loading . . ."; 
} else { 
    if (tag.name) { 
     return tag.name; 
    } 
    return tag.text + " [NEW]"; 
} 
} 

function tagSelectionResult(tag) { 
    if (tag.name) { 
    return tag.name; 
    } 
    return tag.text; 
} 

मुझे लगता है कि किसी भी तरह टेम्पलेट में रीसेट फ़ंक्शन झूठी वापसी करने का कोई तरीका है या कुछ आइटम उस शो को दिखाने के लिए नहीं है यदि यह पहले से ही चुना गया है। संभव कुछ इस तरह (कुछ भी नहीं मिल सकता है ऑनलाइन या डॉक्स में) है

Answer 1

यह का उपयोग कर चयनित विकल्पों को छिपाने के लिए की जरूरत है लगता है जैसे आप a custom matcher देख रहे हैं। एक का उपयोग करने से आप इसे उपयोगकर्ता को प्रदर्शित करने से पहले ड्रॉपडाउन आइटम फ़िल्टर कर सकते हैं।

var $t = $('#target'); 
 
$t.select2({ 
 
    multiple: true, 
 
    tags: true, 
 
    data: ["Pasty", "Pasta", "Posters"], 
 
    matcher: function(params, option) { 
 
    var selected = $t.select2('data'); 
 
    var optionSelected = selected.some(function(item) { 
 
     return (item.text === option.text); 
 
    }); 
 
    if (optionSelected) return false; 
 
    return option; 
 
    } 
 
});

#target { 
 
    width: 100%; 
 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /> 
 
<select id="target"></select>

Answer 2

आप templateResult समारोह को बदलने पर गौर करना चाहिए ...

templateResult समारोह एक स्ट्रिंग पाठ वाले होने के लिए वापस आ जाएगी प्रदर्शित, या एक ऑब्जेक्ट (जैसे एक jQuery ऑब्जेक्ट) जिसमें डेटा प्रदर्शित किया जाना चाहिए। यह शून्य भी लौटा सकता है, जो विकल्प सूची में विकल्प को प्रदर्शित होने से रोक देगा।

https://select2.github.io/options.html#templateSelection

Answer 3

आप नीचे दिए गए की तरह इस लक्ष्य को हासिल कर सकते हैं,

आप सीएसएस

$('select').select2();

.select2-container--default .select2-results__option[aria-selected=true] { 
 
    display: none; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> 
 

 
<select id="Tags" name="Tags" multiple="multiple"> 
 
    <option value="1">first</option> 
 
    <option value="2">second</option> 
 
    <option value="3">third</option> 
 
    <option value="4">fourth</option> 
 
</select>