असीमित डेटा के साथ SELECT2 4.0.0 का उपयोग करके

Question

मैं 2 साल से अब चयन 2 का उपयोग कर रहा हूं और मैं वास्तव में सभी देवताओं का आनंद लेता हूं। हालांकि, संस्करण 3.5.एक्स की सीमा है, इसलिए मैं संस्करण 4.0 पर जा रहा हूं, जो मुझे सिरदर्द देता है!

आपके रिकॉर्ड के लिए, मैं बड़ी तालिका (> 10.000 प्रविष्टियों) के साथ चयन 2 का उपयोग कर रहा हूं, इसलिए AJAX & अनंत डेटा (पृष्ठ 50 आइटम पर सेट)।

1. संस्करण 3.5.2 के साथ, मैं जब डेटा (formatSelection और query.term का प्रयोग करके) के लिए खोज रेखांकन मैच पुन: पेश कर सकते हैं। किसी भी विचार कैसे संस्करण 4.0.0 (समारोह के साथ इसे बनाने के लिए templateResult केवल गुजरता result और नहीं query अब?

2. संस्करण 3.x के साथ

   , तो आप मुफ्त खोज मूल्य का उपयोग कर प्रविष्टियों सूची में नहीं था जोड़ सकते हैं (createSearchChoice का प्रयोग करके) संस्करण 4.0 में यह विकल्प नहीं है, कोई विचार है कि इसे फिर से कैसे बनाया जाए?

3. मैं चयन बार के साथ चयन बार को प्रतिस्थापित करने का प्रयास करता हूं (अभी भी चयन ड्रॉपडाउन का उपयोग कर रहा हूं)। एडाप्टर को मजबूर करना संभव है लेकिन मैं कैसे खोजने में असमर्थ था।

4. मुझे या तो एक पंक्ति (पंक्ति 1 पर) या एक बटन जोड़ने की आवश्यकता है (फ़्लोटिंग दाएं) नया आइटम जोड़ने के लिए (createTag के समान, लेकिन किसी आइटम के लिए)। क्या किसी ने इसे पहले से बनाया है?

Answer 1

मैं अत्यधिक the release notes और 4.0 release announcement पढ़ने जब Select2 3.5.2 से पलायन 4.0.0 Select2 को सलाह देते हैं।

संस्करण 3.5.2 के साथ

, मैं रेखांकन मैच जब डेटा .. किसी भी विचार (formatSelection और query.term का प्रयोग करके) के लिए खोज पुन: पेश कर सकते हैं कि v4.0.0 के साथ इसे बनाने के लिए (समारोह templateResult केवल 'परिणाम' पारित और अब और नहीं 'जिज्ञासा'?

यह 4.0 में निकाल दिया गया क्योंकि परिणाम प्रश्नों से अलग कर दिया गया है, तो यह समझ में जानकारी के साथ गुजर रहा रखने के लिए नहीं किया। बेशक, इस नहीं है मतलब है कि आप क्वेरी प्राप्त नहीं कर सकते हैं और इसे स्टोर कर सकते हैं। आपको केवल इतना करना होगा कि क्वेरी को स्टोर करें, कुछ ऐसा हो सकता है जो

काम कर सकता है

var query = {}; 
var $element = $('#my-happy-select'); 

function markMatch (text, term) { 
    // Find where the match is 
    var match = text.toUpperCase().indexOf(term.toUpperCase()); 

    var $result = $('<span></span>'); 

    // If there is no match, move on 
    if (match < 0) { 
    return $result.text(text); 
    } 

    // Put in whatever text is before the match 
    $result.text(text.substring(0, match)); 

    // Mark the match 
    var $match = $('<span class="select2-rendered__match"></span>'); 
    $match.text(text.substring(match, match + term.length)); 

    // Append the matching text 
    $result.append($match); 

    // Put in whatever is after the match 
    $result.append(text.substring(match + term.length)); 

    return $result; 
} 

$element.select2({ 
    templateResult: function (item) { 
    // No need to template the searching text 
    if (item.loading) { 
     return item.text; 
    } 

    var term = query.term || ''; 
    var $result = markMatch(item.text, term); 

    return $result; 
    }, 
    language: { 
    searching: function (params) { 
     // Intercept the query as it is happening 
     query = params; 

     // Change this to be appropriate for your application 
     return 'Searching…'; 
    } 
    } 
}); 

संस्करण 3.x के साथ, आप खोज मूल्य का उपयोग करके मुफ्त प्रविष्टियां जोड़ सकते हैं सूची में नहीं (createSearchChoice का उपयोग करके)। वी 4.0 में यह विकल्प नहीं है, कोई विचार है कि इसे फिर से कैसे बनाया जाए?

यह अभी भी tags विकल्प (true के लिए सेट) का उपयोग कर 4.0 में किया जा सकता है। यदि आप टैग को कस्टमाइज़ करना चाहते हैं, तो आप createTag (createSearchChoice के समान) का उपयोग कर सकते हैं।

var $element = $('#my-happy-select'); 

$element.select2({ 
    createTag: function (query) { 
    return { 
     id: query.term, 
     text: query.term, 
     tag: true 
    } 
    }, 
    tags: true 
});