jQuery Select2 Tag on Blur

Question

Sto usando Select2 per creare un campo di indirizzi di posta elettronica in stile Gmail nella mia applicazione. Funziona benissimo tranne che per un caso: quando l'utente digita un indirizzo e-mail e non inserisce uno spazio o una virgola dopo di esso, e non tocca invio o tab. Ad esempio, se si digita semplicemente un indirizzo e-mail e quindi si utilizza il mouse per selezionare il campo successivo nel modulo, l'indirizzo e-mail digitato scompare.

Ho un esempio jsfiddle here che illustra il problema.

Ecco come Sto installando select2 sul mio ingresso nascosto:

$(function(){ 
    $('input').select2({ 
     tags: [], 
     width: "300px", 
     dropdownCss: {display: 'none'}, 
     tokenSeparators: [',', ', ', ' '] 
    }); 
}); 

C'è un modo per me per impostare select2 in modo che onBlur si prende solo ciò che resta e non è attualmente un tag e lo rende uno?

Answer 1

Questo è ora supportato nella versione 3.3 della libreria select2 utilizzando l'opzione 'selectOnBlur'.

Answer 2

ho davvero capito ciò che si sta cercando di fare qui perché si sta parlando sugli e-mail:

jQuery(element.val().split(",")).each(function() { 
       data.push({id: this, text: this}); 
      }); 

Ma si potrebbe provare questo invece:

var splitted = element.val().split(","); 
for(var i=0,z=splitted.length;i<z;i++) 
    data.push({id: splitted[i], text: splitted[i]}); 

A proposito, la tua jsfiddle è incompleto.

Answer 3

Avevo un modulo con select2 (modalità tag) e un pulsante di invio. Per impostazione predefinita, quando un utente digita un tag, senza selezionare il tag dall'elenco a discesa o premendo uno dei tasti di controllo di attivazione, la voce utente verrà persa perché il plugin chiude l'oggetto dom di input generato sull'evento di sfocatura.

La mia soluzione rapida a questo problema è stato quello di incidere la funzione di sfocatura plug-in e di aggiungere le seguenti righe:

var val=this.search.val(); 
if($.trim(val)!='') this.onSelect({id:val,text:val}); 

volta sfocatura funzione viene chiamata, i controlli di codice di cui sopra, se la voce dell'utente. Se ce n'è uno, attiva l'evento select e invia l'oggetto richiesto. L'oggetto che sto passando è adatto solo per select2 in modalità tagging e se si utilizza select2 v3.2 questa riga può essere inserita all'avvio della funzione blur di AbstractSelect2 sulla riga 1311. Spero che questo ti dia un'idea su come personalizzare il widget in base alle tue esigenze.

Answer 4

Dal documentation al 4.0.3:

$('select').select2({ 
    selectOnClose: true 
}); 

Questo catturerà la selezione e creare un tag, se l'utente fa clic altrove.