16

Tôi đang nghĩ đến việc chuyển từ Chosen sang Select2 vì Select2 có các phương thức gốc cho ajax. Ajax rất quan trọng vì thường bạn phải tải rất nhiều dữ liệu.Định dạng JSON cho jquery-select2 đa với ajax

tôi thực hiện thành công ví dụ với JSON của api.rottentomatoes.com/api/

Tôi đã làm một tệp JSON để kiểm tra ajax, nhưng nó đã không hoạt động.

Tôi không biết JSON nên như thế nào. Dường như không có tài liệu chi tiết:

https://github.com/ivaynberg/select2/issues/920

tôi đã cố gắng unsucessfully một số định dạng JSON, vì vậy tôi cố gắng bắt chước một định dạng JSON tương tự như api.rottentomatoes nhưng nó không hoạt động.

Tôi có thể thiếu điều gì đó ngu ngốc.

function MultiAjaxAutoComplete(element, url) { 
    $(element).select2({ 
     placeholder: "Search for a movie", 
     minimumInputLength: 1, 
     multiple: true, 
     ajax: { 
      url: url, 
      dataType: 'jsonp', 
      data: function(term, page) { 

       return { 
        q: term, 
        page_limit: 10, 
        apikey: "z4vbb4bjmgsb7dy33kvux3ea" //my own apikey 
       }; 
      }, 
      results: function(data, page) { 
       return { 
        results: data.movies 
       }; 
      } 
     }, 
     formatResult: formatResult, 
     formatSelection: formatSelection, 
     /*initSelection: function(element, callback) { 
      var data = []; 
      $(element.val().split(",")).each(function(i) { 
       var item = this.split(':'); 
       data.push({ 
        id: item[0], 
        title: item[1] 
       }); 
      }); 
      //$(element).val(''); 
      callback(data); 
     }*/ 
    }); 
}; 

function formatResult(node) { 
    return '<div>' + node.id + '</div>'; 
}; 

function formatSelection(node) { 
    return node.id; 
}; 


/*MultiAjaxAutoComplete('#e6', 'http://api.rottentomatoes.com/api/public/v1.0/movies.json');*/ 

MultiAjaxAutoComplete('#e6', 'https://raw.github.com/katio/Quick-i18n/master/test.json'); 

$('#save').click(function() { 
    alert($('#e6').val()); 
}); 

tôi đã làm jsfiddle này:

http://jsfiddle.net/Katio/H9RZm/4/

+1

Câu hỏi tốt, chọn2 tài liệu phần ajax không có ý nghĩa với tôi, tôi chắc chắn rằng nhiều người sẽ có câu hỏi này. –

Trả lời

31

Nếu bạn chuyển sang JSON chắc chắn rằng bạn chuyển datatype để JSON từ JSONP.

Định dạng được quy định ở đây: http://ivaynberg.github.io/select2/#doc-query

Các JSON sẽ trông như thế này:

{results: [choice1, choice2, ...], more: true/false } 

Về cơ bản các thuộc tính cần thiết chỉ trong việc lựa chọn là id. nếu tùy chọn chứa các tùy chọn con khác (chẳng hạn như trong trường hợp lựa chọn giống như nhóm chọn) thì các tùy chọn đó được chỉ định bên trong thuộc tính children.

Trình kết xuất lựa chọn và lựa chọn mặc định mong đợi thuộc tính text trong mọi lựa chọn - đó là những gì được sử dụng để hiển thị lựa chọn.

do đó, một ví dụ hoàn chỉnh của một quốc gia Mỹ sử dụng renderer mặc định có thể trông như thế này:

{ 
    "results": [ 
     { 
      "id": "CA", 
      "text": "California" 
     }, 
     { 
      "id": "CO", 
      "text": "Colarado" 
     } 
    ], 
    "more": false 
} 

Hy vọng điều này giúp bạn bắt đầu.

+1

Cảm ơn bạn và chúc mừng, Select2 thực sự tuyệt vời. Tôi đã thiếu tham số "nhiều hơn", tuy nhiên tôi không thấy thông số nhiều hơn trong ji api.rottentomatoes. Bất kỳ cách nào, bây giờ nó hoạt động cho tôi. Cảm ơn bạn vì câu trả lời. –

+0

Tôi đã đi vòng trong vòng kết nối từ Select2 tài liệu đến Google và cuối cùng ở đây. Câu trả lời này thực sự đã cứu tôi. Tại sao bạn không có tài liệu chi tiết hơn một lớp lót? Đừng nói rằng bạn có một trên phần tài liệu, nhìn vào nó tôi cảm thấy như đọc tiếng Nga và không có ý nghĩa –

+2

Rõ ràng, trong select2 4.0.0, mặc định chấp nhận định dạng bây giờ là {results: [{id: 'CA', văn bản: 'California'}, {id: 'CO', văn bản: 'Colarado'], phân trang: {more: false}} (lưu ý thuộc tính pagination) – personne3000

0

Tài liệu chính thức cho định dạng JSON bắt buộc: ref. https://select2.org/data-sources/formats

{ 
    "results": [ 
    { 
     "id": 1, 
     "text": "Option 1" 
    }, 
    { 
     "id": 2, 
     "text": "Option 2" 
    } 
    ], 
    "pagination": { 
    "more": true 
    } 
}