Thẻ jQuery Select2 trên Blur

Question

Tôi đang sử dụng Select2 để tạo trường địa chỉ email kiểu Gmail trong ứng dụng của mình. Nó hoạt động tốt ngoại trừ một trường hợp: khi người dùng nhập vào một địa chỉ email và không đặt dấu cách hoặc dấu phẩy sau nó, và không nhấn enter hoặc tab. Ví dụ, nếu họ chỉ cần gõ một địa chỉ e-mail và sau đó sử dụng chuột để chọn trường tiếp theo trong biểu mẫu, địa chỉ email mà họ đã gõ sẽ biến mất.

Tôi có một ví dụ jsfiddle here minh họa sự cố.

Đây là cách tôi đang thiết lập Select2 trên đầu vào ẩn của tôi:

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

Có cách nào để tôi thiết lập Select2 để onBlur nó chỉ mất bất cứ điều gì trái và hiện không có một thẻ và làm cho nó một?

Answer 1

Điều này hiện được hỗ trợ trong phiên bản 3.3 của thư viện select2 sử dụng tùy chọn 'selectOnBlur'.

Answer 2

Tôi không thực sự hiểu những gì bạn đang cố gắng làm ở đây vì bạn đang nói về email:

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

Nhưng bạn có thể thử loại này thay vì:

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

Bằng cách này, jsfiddle của bạn là chưa hoàn thành.

Answer 3

Tôi đã có biểu mẫu với select2 (chế độ thẻ) và nút gửi. Theo mặc định khi người dùng nhập thẻ, mà không chọn thẻ từ trình đơn thả xuống hoặc nhấn một trong các nút điều khiển kích hoạt, mục nhập người dùng sẽ bị mất vì plugin đóng đối tượng dom đầu vào được tạo trên sự kiện mờ.

sửa chữa nhanh chóng của tôi cho vấn đề này là để hack các chức năng mờ plugin và thêm những dòng sau:

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

Khi mờ hàm được gọi, kiểm tra mã trên nếu người dùng nhập. Nếu có bất kỳ nó kích hoạt sự kiện chọn và gửi các đối tượng cần thiết. Đối tượng tôi đang truyền chỉ phù hợp với select2 trong chế độ gắn thẻ và nếu bạn sử dụng select2 v3.2 dòng này có thể được chèn vào lúc bắt đầu chức năng mờ của AbstractSelect2 trên dòng 1311. Tôi hy vọng điều này sẽ cho bạn ý tưởng về cách tùy chỉnh phụ tùng theo nhu cầu của bạn.

Answer 4

Từ documentation tính 4.0.3:

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

này sẽ nắm bắt được lựa chọn và tạo một thẻ nếu người dùng nhấp nơi khác.