web-dev-qa-db-fra.com

Comment utiliser Select2 avec JSON via une requête Ajax?

Mon Select2 3.4.5 ne fonctionne pas avec les données JSON.

Voici ma zone de saisie en HTML:

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

… Et mon 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;
    }
});

J'ai créé une API avec Laravel 4 qui renvoie une valeur chaque fois que je tape quelque chose dans ma zone de texte.

Voici le résultat si je tape "test" sur ma zone de texte:

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

Je ne peux pas ajouter le résultat à ma liste déroulante Select2. Je pense que formatSelection et formatResult sont la cause du problème car je ne sais pas quel paramètre doit être placé. Je ne sais pas où obtenir ces paramètres tels que conteneur, objet et requête et les valeurs qu'il devrait renvoyer, ou ma réponse JSON est-elle fausse?

javascriptjsonlaraveljquery-select2
73
melvnberd

Ici vous avez un exemple

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

C'est assez facile

92
Tolo Palmer

pour select2 v4.0. légèrement différent

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

Dans la version 4.0.2 légèrement différente Juste dans processResults et dans result:

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

Vous devez ajouter data.items dans result. items est le nom Json:

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

C’est ainsi que j’ai résolu mon problème: je reçois des données dans une variable de données et, en utilisant les solutions ci-dessus, j’obtenais l’erreur could not load results. J'ai dû analyser les résultats différemment dans 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
        });
6
Chaudhry Waqas

Mon ajax ne se fait jamais virer avant d’avoir tout emballé

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

Je l'utilisais dans la section montée de Vue. il faut plus de temps.

1
Apit John Ismail

Les problèmes peuvent être causés par un mappage incorrect. Etes-vous sûr que votre résultat est défini dans "données"? Dans mon exemple, le code backend renvoie les résultats sous la clé "items". Le mappage doit donc ressembler à:

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

et pas:

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

Si la requête ajax n'est pas déclenchée, veuillez vérifier la classe select2 dans l'élément select. Supprimer la classe select2 résoudra ce problème.

0
sudin