1. ホーム
  2. javascript

[解決済み] AjaxリクエストでSelect2をJSONで使用するには?

2022-11-26 02:16:08

質問

私の 選択2 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;
    }
});

Laravel4で、テキストボックスに何か入力するたびに値を返すAPIを作りました。

テキストボックスに"test"と入力すると、以下のような結果が得られます。

[{"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のドロップダウンに結果を追加できない。私は思う formatSelectionformatResult は、どのようなパラメータを配置する必要があるのか分からないため、問題を引き起こしています。コンテナ、オブジェクト、クエリなどのパラメータと、それが返すべき値をどこで取得すればよいのかわかりませんし、私のJSONレスポンスが間違っているのでしょうか?

どのように解決するのですか?

以下に例を示します。

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

とても簡単です。