Ajaxリクエストを介してJSONでSelect2を使用する方法は？

88

私Selectセレクト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ドロップダウンに結果を追加できません。私が考えるformatSelectionとformatResult、私はそれの上に置かれるべきかのパラメータを知らないため、問題を引き起こしています。コンテナ、オブジェクト、クエリなどのパラメータとそれが返す値をどこで取得するのかわかりませんか、JSON応答が間違っていますか？

javascript  json  laravel  jquery-select2 
— melvnberd
ソース

回答:

110

ここに例があります

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

とても簡単です

— トロパーマー
ソース
2
$ .mapへの提案に感謝
— tacos_tacos_tacos 2015
「スラッグ」パラメータについて説明していただけますか？
— IcedD​​ante 2015
itemは、completeName、slug、およびidプロパティを持つオブジェクトです。これは単なる例であり、コピーして貼り付けます。
— Tolo Palmer
2
スラッグそれはアイテム、あなたのアイテムの実際のプロパティです、あなたが余分なパラメータを追加する方法を見ることができるので私はこれを追加しました;）
— Tolo Palmer
4
このエラーを受け取りましたjquery.min.js：2 Uncaught TypeError：サーバーが結果を返さない場合、nullのプロパティ 'length'を読み取ることができません。
— Soptareanu Alex 2017
109

用SELECT2のv4.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
                    }
                })
            };
        }
    }
});
— レイザーフィッシュ
ソース
8
...仕事にこれを取得することはできません:(ませんが、サーバーに行われて呼び出します。
— Simanas
それは私が作った間違いが適切にマッピングされていなかった、おかげで働いていたidし、textキーの値。
— ja8zyjits 2016
18

バージョン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。itemsJsonの名前です：

{
  "items": [
    {"id": 1,"name": "Tetris","full_name": "s9xie/hed"},
    {"id": 2,"name": "Tetrisf","full_name": "s9xie/hed"}
  ]
}
— 悪いghafoory
ソース
1
itemsから削除した場合、応答に属性data.itemsを追加する必要はありませんitemsか？;）
— Yana Agun Siswanto 2016年
1
はい@bekicot、あなただけの唯一の指定$.map(data, function (item) 、あなたのJSONが配列の場合：[ {"id": 1,"text": "One"}, {"id": 2,"text": "Two"} ]
— Tantowi Mustofa
2
私の頭を壁にぶつけてきました、そしてこれは物事を片付けました。ありがとうございます。select2のドキュメントが大幅に不足しています。
— ニールB.
11

ここでは、->国旗、都市、州、国を含む私の例を示します。

これが私の出力です。

ここに画像の説明を入力してください

これらの2つのCdnjsまたはリンクを添付します。

<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スクリプト 

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

    }
});

予想されるJSON応答。

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

         }
      }
   },

]
— ディリップ・ヒラパラ
ソース
しかし、 `data：function（term）{return {term：term};で混乱しています。}、 `
— Vikas Katariya
6

これが私の問題を修正した方法です。データ変数でデータを取得しています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
        });
— Chaudhry Waqas
ソース
1

問題は、誤ったマッピングが原因である可能性があります。結果を「データ」に設定してもよろしいですか？私の例では、バックエンドコードは「items」キーの下に結果を返すため、マッピングは次のようになります。

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

ではなく：

 results: $.map(data, function (item) {
    ....
    }
— テスター
ソース
1

私が全部を包むまで私のajaxは決して解雇されません

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

Vueのマウントセクションで使用していました。もっと時間が必要です。

— アピットジョンイスマイル
ソース
0

ajaxリクエストが実行されない場合は、select要素のselect2クラスを確認してください。select2クラスを削除すると、その問題が修正されます。

— スーディン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.