SELECT2 4.0.0'ı sonsuz veri ve filtreyle kullanma

Question

2 yıldan beri Select2 kullanıyorum ve gerçekten tüm devlerin tadını çıkarıyorum. ancak, 3.5.x sürümünün limiti var, bu yüzden bana baş ağrısı veren 4.0 versiyonuna geçiyorum!

Kaydınız için büyük bir tablo ile Select2 kullanıyorum (> 10.000 giriş), böylece AJAX & sonsuz veri (sayfa 50'ye ayarlandı). (formatSelection ve query.term kullanarak) verilerine ararken

1. sürümü 3.5.2, ben altını maçı üretebilir. versiyon 4.0.0 (fonksiyonu ile bunu yapmak için nasıl bir fikriniz templateResult sadece artık result değil query geçer? sürüm 3.x ile

2. , arama değeri kullanarak serbest girişleri listesinde değildi ekleyebilir() createSearchChoice kullanılarak Sürüm 4.0, bu seçenek yok, herhangi bir fikri nasıl yeniden yapmak için?

3. Seçme çubuğunu bir giriş çubuğuyla değiştirmeye çalışıyorum (yine de açılır listeyi kullanarak).

4. Nasıl bir satır ekleyeceğim (satır 1'de) veya bir düğme (Yeni öğe eklemek için (createTag'a benzer, ancak bir öğe için). Biri yaptı mı?

Answer 1

ederim 4.0.0 Select2 için 2'yi Seç 3.5.2 taşıma gerçekleştirirken the release notes ve 4.0 release announcement okumanızı öneririz. .. bir fikrin (formatSelection ve query.term kullanarak) verilerine ararken sürümü 3.5.2 ile

, ben işlev templateResult sadece 'sonucu' geçmesi (v4.0.0 ile bunu yapmak için nasıl alt çizgi maçı üretebilir ve artık değil 'sorgu'?

sonuç sorguları ayrılmış olduğu için bu 4.0 uzaklaştırıldı, böylece bilgilendirdiğiniz tutmak için anlamı yoktu. Tabii ki, bu değil sorgusunu alıp saklayamayacağınız anlamına gelir.Tüm yapmanız gereken, sorguyu depolamaktır, aşağıdaki gibi bir şey çalışabilir

Arama değeri kullanarak

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…'; 
    } 
    } 
}); 

sürüm 3.x ile, ekleyebilir ücretsiz girişleri (createSearchChoice kullanarak) listesinde değildi. V4.0 bu seçeneğe sahip değil, herhangi bir fikrin tekrar nasıl yapılacağı?

Bu

hala tags seçeneği ( true olarak ayarlayın) kullanarak 4,0 yapılabilir. Etiketi özelleştirmek isterseniz, createTag'u ( createSearchChoice benzeri) kullanabilirsiniz.

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

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