Wie verwende ich Select2 mit JSON über eine Ajax-Anfrage?

Mein Select2 3.4.5 funktioniert nicht mit JSON-Daten.

Hier ist mein Eingabefeld für HTML:

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

… Und mein JavaScript

$(".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;
    }
});

Ich habe mit Laravel 4 eine API erstellt, die einen Wert zurückgibt, wenn ich etwas in mein Textfeld eingebe.

Hier ist das Ergebnis, wenn ich "test" in mein Textfeld eingebe:

[{"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}]

Ich kann das Ergebnis nicht zu meiner Select2-Dropdown-Liste hinzufügen. Ich denke formatSelectionund formatResultverursache das Problem, weil ich nicht weiß, welcher Parameter darauf platziert werden soll. Ich weiß nicht, wo ich diese Parameter wie Container, Objekt und Abfrage sowie die Werte erhalten soll, die zurückgegeben werden sollen, oder ist meine JSON-Antwort falsch?

Hier haben Sie ein Beispiel

$("#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
                    }
                })
            };
        }
    }
});

Es ist sehr leicht

für select2 v4.0.0 etwas anders

$(".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
                    }
                })
            };
        }
    }
});

In Version 4.0.2 etwas anders Nur in processResultsund in result:

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

Sie müssen hinzufügen data.itemsin result. itemsist Json Name:

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

Hier gebe ich Ihnen mein Beispiel, das -> Länderflagge, Stadt, Bundesland, Land enthält.

Hier ist meine Ausgabe.

Fügen Sie diese beiden Cdn js oder Links hinzu.

<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>

js Skript

//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
                    }
                })
            };
        }

    }
});

Erwartete JSON-Antwort.

[
   {
      "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",

         }
      }
   },

]

Auf diese Weise habe ich mein Problem behoben. Ich erhalte Daten in Datenvariablen und bei Verwendung der oben genannten Lösungen wurde ein Fehler angezeigt could not load results. Ich musste die Ergebnisse in processResults anders analysieren.

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

Die Probleme können durch falsche Zuordnung verursacht werden. Sind Sie sicher, dass Ihre Ergebnismenge in "Daten" festgelegt ist? In meinem Beispiel gibt der Backend-Code Ergebnisse unter dem Schlüssel "items" zurück, sodass die Zuordnung folgendermaßen aussehen sollte:

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

und nicht:

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

Mein Ajax wird nie abgefeuert, bis ich das Ganze eingewickelt habe

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

Ich habe es in einem montierten Bereich von Vue verwendet. es braucht mehr Zeit.

Wenn keine Ajax-Anfrage ausgelöst wird, überprüfen Sie bitte die select2-Klasse im select-Element. Durch Entfernen der Klasse select2 wird dieses Problem behoben.