Ajax 요청을 통해 JSON과 함께 Select 2를 사용하는 방법

Ajax 요청을 통해 JSON과 함께 Select 2를 사용하는 방법

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

저는 Larabel 4로 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}]

[ Select 2 ]드롭다운에 결과를 추가할 수 없습니다.생각합니다formatSelection그리고.formatResult어떤 파라미터를 붙여야 할지 모르기 때문에 문제가 발생하고 있습니다.컨테이너, 객체, 쿼리 등의 파라미터와 반환해야 할 값을 어디서 얻을 수 있는지 알 수 없습니다.아니면 JSON 응답이 잘못된 것입니까?

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

여기 예가 있습니다.

$("#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개의 Cdn j 또는 링크를 연결합니다.

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

         }
      }
   },

]

버전 4.0.2에서는 약간 다르다Just inprocessResults및 인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"}
  ]
}

이렇게 해서 문제를 해결했습니다.데이터 변수에서 데이터를 가져오고 위의 솔루션을 사용하면 오류가 발생합니다.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
        });

내 에이잭스는 내가 이걸 다 싸서

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

나는 Vue의 기마 구역에서 그것을 사용하고 있었다.시간이 더 필요해요.

잘못된 매핑이 문제의 원인일 수 있습니다.결과가 "data"로 설정되었습니까?이 예에서는 백엔드 코드가 "items" 키로 결과를 반환하므로 매핑은 다음과 같습니다.

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

다음 중 하나가 아닙니다.

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

Ajax 요청이 실행되지 않으면 select 요소에서 select2 클래스를 확인하십시오.select2 클래스를 삭제하면 이 문제가 해결됩니다.

언급URL : https://stackoverflow.com/questions/20926707/how-to-use-select2-with-json-via-ajax-request