Utilizzo di SELECT2 4.0.0 con dati infiniti e filtro

Question

Uso Select2 da 2 anni e mi piacciono davvero tutti gli sviluppi. tuttavia, la versione 3.5.x ha il suo limite, quindi mi sto spostando alla versione 4.0, che mi dà mal di testa!

Per la cronologia, sto usando Select2 con una tabella grande (> 10.000 voci), quindi AJAX & dati infiniti (pagina impostata su 50 voci).

1. Con la versione 3.5.2, posso riprodurre la partita sottolineatura per la ricerca di dati (utilizzando formatSelection e query.term). Qualsiasi idea di come farlo con la versione 4.0.0 (funzione templateResult passa solo result e non query più?

2. Con la versione 3.x, è possibile aggiungere ingressi gratuiti utilizzando valore di ricerca non era nella lista (tramite createSearchChoice) La versione 4.0 non ha questa opzione, nessuna idea su come rifarlo?

3. Provo a sostituire la barra di selezione con una barra di inserimento (utilizzando ancora il menu a discesa di selezione). non è stato possibile trovare il modo.

4. Devo aggiungere una linea (alla riga 1) o un pulsante (mobile a a destra) per aggiungere un nuovo elemento (simile a createTag, ma per un articolo). qualcuno lo ha già fatto?

Answer 1

mi raccomando la lettura the release notes e la 4.0 release announcement durante la migrazione da Select2 3.5.2 a 4.0.0 Select2.

Con la versione 3.5.2, posso riprodurre la partita sottolineatura per la ricerca di dati (utilizzando formatSelection e query.term) .. qualche idea di come farlo con v4.0.0 (funzione templateResult passare solo 'risultato' e non 'query' più?

questo è stato rimosso nella versione 4.0, perché i risultati sono stati separati dalle query, quindi non aveva senso per mantenere passando lungo le informazioni. Naturalmente, questo non significa che non puoi ottenere la query e memorizzarla.Tutto quello che dovresti fare è archiviare la query, qualcosa come la seguente potrebbe funzionare

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

Con la versione 3.x, è possibile aggiungere voci gratuite utilizzando il valore di ricerca non presente nell'elenco (utilizzando createSearchChoice). V4.0 non ha questa opzione, nessuna idea su come rifarlo?

Questo può ancora essere fatto in 4.0 utilizzando l'opzione tags (impostarlo a true). Se si desidera personalizzare il tag, è possibile utilizzare createTag (simile a createSearchChoice).

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

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