Làm thế nào để sử dụng Select2 với JSON thông qua yêu cầu Ajax?

Select2 3.4.5 của tôi không hoạt động với dữ liệu JSON.

Đây là hộp nhập liệu của tôi trên HTML:

<input class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' />

… Và JavaScript của tôi

$(".itemSearch").select2({
    placeholder: "Search for an Item",
    minimumInputLength: 2,
    ajax: {
        url: "/api/productSearch",
        dataType: 'json',
        quietMillis: 100,
        data: function (term, page) {
            return {
                option: term
            };
        },
        results: function (data, page) {
            var more = (page * 10) < data.total;
            return {
                results: data.itemName,
                more: more
            };
        }
    },
    formatResult: function (data, term) {
        return data;
    },
    formatSelection: function (data) {
        return data;
    },
    dropdownCssClass: "bigdrop",
    escapeMarkup: function (m) {
        return m;
    }
});

Tôi đã tạo một API với Laravel 4 trả về một giá trị bất cứ khi nào tôi nhập bất kỳ thứ gì vào hộp văn bản của mình.

Đây là kết quả nếu tôi nhập "test" vào hộp văn bản của mình:

[{"itemName":"Test item no. 1","id":5},
{"itemName":"Test item no. 2","id":6},
{"itemName":"Test item no. 3","id":7},
{"itemName":"Test item no. 4","id":8},
{"itemName":"Test item no. 5","id":9},
{"itemName":"Test item no. 6","id":10},
{"itemName":"Test item no. 7","id":11}]

Tôi không thể thêm kết quả vào menu thả xuống Select2 của mình. Tôi nghĩ formatSelectionvà formatResultđang gây ra sự cố vì tôi không biết nên đặt tham số nào vào nó. Tôi không biết nơi lấy các tham số đó như vùng chứa, đối tượng và truy vấn và các giá trị mà nó phải trả về, hay phản hồi JSON của tôi bị sai?

Đây bạn có một ví dụ

$("#profiles-thread").select2({
    minimumInputLength: 2,
    tags: [],
    ajax: {
        url: URL,
        dataType: 'json',
        type: "GET",
        quietMillis: 50,
        data: function (term) {
            return {
                term: term
            };
        },
        results: function (data) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.completeName,
                        slug: item.slug,
                        id: item.id
                    }
                })
            };
        }
    }
});

Nó khá dễ

đối với select2 v4.0.0 hơi khác một chút

$(".itemSearch").select2({
    tags: true,
    multiple: true,
    tokenSeparators: [',', ' '],
    minimumInputLength: 2,
    minimumResultsForSearch: 10,
    ajax: {
        url: URL,
        dataType: "json",
        type: "GET",
        data: function (params) {

            var queryParameters = {
                term: params.term
            }
            return queryParameters;
        },
        processResults: function (data) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.tag_value,
                        id: item.tag_id
                    }
                })
            };
        }
    }
});

Trong Phiên bản 4.0.2 hơi khác Chỉ trong processResultsvà trong result:

    processResults: function (data) {
        return {
            results: $.map(data.items, function (item) {
                return {
                    text: item.tag_value,
                    id: item.tag_id
                }
            })
        };
    }

Bạn phải thêm data.itemsvào result. itemslà tên Json:

{
  "items": [
    {"id": 1,"name": "Tetris","full_name": "s9xie/hed"},
    {"id": 2,"name": "Tetrisf","full_name": "s9xie/hed"}
  ]
}

Ở đây tôi cung cấp cho bạn ví dụ của tôi bao gồm -> Quốc kỳ, Thành phố, Tiểu bang, Quốc gia.

Đây là đầu ra của tôi.

Đính kèm hai Cdn j hoặc liên kết này.

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>

tập lệnh js

//for apend flag of country.

function formatState (state) {
    console.log(state);
    if (!state.id) {
      return state.text;
    }
    var baseUrl = "admin/images/flags";
    var $state = $(
      '<span><img src="'+baseUrl+ '/' + state.contryflage.toLowerCase() + '.png"  class="img-flag" /> ' +state.text+ '</span>'
    );
    return $state;
  };


$(function(){
    $("#itemSearch").select2({
    minimumInputLength: 2,
    templateResult: formatState, //this is for append country flag.
    ajax: {
        url: URL,
        dataType: 'json',
        type: "POST",
        data: function (term) {
            return {
                term: term
            };
        },
        processResults: function (data) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.name+', '+item.state.name+', '+item.state.coutry.name,
                        id: item.id,
                        contryflage:item.state.coutry.sortname
                    }
                })
            };
        }

    }
});

Phản hồi JSON mong đợi.

[
   {
      "id":7570,
      "name":"Brussels",
      "state":{
         "name":"Brabant",
         "coutry":{
            "sortname":"BE",
            "name":"Belgium",

         }
      }
   },
   {
      "id":7575,
      "name":"Brussels",
      "state":{
         "name":"Brabant Wallon",
         "coutry":{
            "sortname":"BE",
            "name":"Belgium",

         }
      }
   },
   {
      "id":7578,
      "name":"Brussel",
      "state":{
         "name":"Brussel",
         "coutry":{
            "sortname":"BE",
            "name":"Belgium",

         }
      }
   },

]

Đây là cách tôi đã khắc phục sự cố của mình, tôi nhận được dữ liệu trong biến dữ liệu và bằng cách sử dụng các giải pháp trên, tôi đã gặp lỗi could not load results. Tôi đã phải phân tích cú pháp các kết quả khác nhau trong processResults.

searchBar.select2({
            ajax: {
                url: "/search/live/results/",
                dataType: 'json',
                headers : {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                delay: 250,
                type: 'GET',
                data: function (params) {
                    return {
                        q: params.term, // search term
                    };
                },
                processResults: function (data) {
                    var arr = []
                    $.each(data, function (index, value) {
                        arr.push({
                            id: index,
                            text: value
                        })
                    })
                    return {
                        results: arr
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) { return markup; },
            minimumInputLength: 1
        });

Các vấn đề có thể do ánh xạ sai. Bạn có chắc rằng bạn đã đặt kết quả của mình trong "data" không? Trong ví dụ của tôi, mã phụ trợ trả về kết quả trong khóa "items", vì vậy ánh xạ sẽ giống như sau:

results: $.map(data.items, function (item) {
....
}

và không:

 results: $.map(data, function (item) {
    ....
    }

Ajax của tôi không bao giờ bị sa thải cho đến khi tôi gói gọn mọi thứ vào

setTimeout(function(){ .... }, 3000);

Tôi đã sử dụng nó trong phần gắn kết của Vue. nó cần thêm thời gian.

Nếu yêu cầu ajax không được kích hoạt, vui lòng kiểm tra lớp select2 trong phần tử select. Xóa lớp select2 sẽ khắc phục sự cố đó.