Как использовать Select2 с JSON через Ajax-запрос?

Question

Как использовать Select2 с JSON через Ajax-запрос?

мой Select2 3.4.5 не работает с данными JSON.

вот мое поле ввода на HTML:

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

...и мой 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;

    }

});

Я сделал API с Laravel 4, который возвращает значение всякий раз, когда я набираю что-либо в своем текстовом поле.

вот результат, если я наберу "тест" в своем текстовом поле:

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

Я не могу добавить результат в свой выпадающий список Select2. Я думаю formatSelection и formatResult вызывают проблему, потому что я не знаю, какой параметр должен быть размещен на нем. Я не знаю, где получить такие параметры, как контейнер, объект и запрос, и значения, которые он должен возвращать, или мой ответ JSON неверен?

616 7

javascript json laravel jquery-select2

7 ответов:

Comments

Ничего не найдено.

Tolo Palmer · Accepted Answer · 2014-06-30 18:01:23

вот вам пример

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

Это довольно легко

razorfish · Accepted Answer · 2015-11-03 14:24:59

на select2 В4.0.0 немного разные

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

Ebad ghafoory · Accepted Answer · 2016-05-07 01:29:54

в версии 4.0.2 немного отличается только в processResults и result:

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

вы должны добавить data.items на result. items это имя Json:

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

Chaudhry Waqas · Accepted Answer · 2017-05-17 23:12:01

вот как я исправил свою проблему, я получаю данные в переменной данных и с помощью вышеуказанных решений я получал ошибку could not load results. Мне пришлось разбирать результаты по-разному в 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
        });

tester · Accepted Answer · 2017-01-28 19:06:31

проблемы могут быть вызваны неправильным отображением. Вы уверены, что у вас есть свой результирующий набор в "данных"? В моем примере внутренний код возвращает результаты в разделе" элементы", поэтому сопоставление должно выглядеть так:
results: $.map(data.items, function (item) {
....
}
и
 results: $.map(data, function (item) {
    ....
    }

Apit John Ismail · Accepted Answer · 2018-04-13 14:11:07

мой ajax никогда не уволят, пока я не завернул все это в

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

я использовал его в смонтированной секции Vue. для этого нужно больше времени.

sudin · Accepted Answer · 2018-09-09 08:34:57

Если запрос ajax не запускается, проверьте класс select2 в элементе select. Удаление класса select2 устранит эту проблему.