如何通过Ajax请求使用Select2与JSON？

Question

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

我用 Laravel 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}]

我无法将结果添加到我的Select2下拉菜单中。 我认为formatSelection和formatResult是问题的原因，因为我不知道应该放什么参数。 我不知道在哪里获取诸如容器、对象和查询之类的参数，以及它应该返回的值，或者我的JSON响应是否有问题？

- melvnberd

Answer 1

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

- Thomas Makos

---

无法正常运作... :( 没有向服务器发出任何请求。 - Simanas

它起作用了，谢谢。我的错误是没有正确映射到“id”和“text”键值。 - Ja8zyjits

Answer 2

这里给您一个例子

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

很容易

- Tolo Palmer

---

感谢您对$.map的建议。 - tacos_tacos_tacos

你能解释一下“slug”参数吗？ - IcedDante

项目是具有completeName、slug和id属性的对象。这只是一个例子，请复制并粘贴。 - Tolo Palmer

Slug是item的一个实际属性，我添加了它，这样你就可以看到如何添加额外的参数;) - Tolo Palmer

当我的服务器没有返回结果时，我会收到这个错误：jquery.min.js:2 Uncaught TypeError: Cannot read property 'length' of null。请注意，不可读取null的长度属性是导致此错误的原因。 - Soptareanu Alex

Answer 3

这里给你一个例子，包含 --> 国家旗帜、城市、州和国家。

这是我的输出。

附上这两个CDN JS或链接。

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

         }
      }
   },

]

- Dilip Hirapara

---

但我对 data: function (term) { return { term: term }; }, 感到困惑。 - VIKAS KATARIYA

Answer 4

在版本4.0.2中，processResults和result略有不同：

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

你必须在 result 中添加data.items。其中items是Json名称：

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

- Ebad ghafoory

---

如果我从data.items中删除items，那么我不需要在响应中添加items属性了，对吧？;) - Yana Agun Siswanto

@bekicot，是的，你只需要指定$.map(data, function (item)，如果你的 JSON 是一个数组：[{"id": 1,"text": "One"}, {"id": 2,"text": "Two"}]。 - Tantowi Mustofa

一直在苦苦挣扎，这下终于豁然开朗了。感谢您，select2的文档实在是太匮乏了。 - Neil B.

Answer 5

这就是我解决问题的方法，我将数据存储在data变量中，并使用上述解决方案时出现了错误无法加载结果。我不得不在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
        });

- StealthTrails

Answer 6

在我把整个代码放入

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

中，我的ajax才开始被触发。

我是在Vue的mounted部分使用它的。这需要更多的时间。

- Apit John Ismail

Answer 7

问题可能是由于错误的映射引起的。你确定你的结果集在"data"中吗？在我的例子中，后端代码在"items"键下返回结果，所以映射应该如下:

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

而不是：

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

- tester

Answer 8

如果 AJAX 请求没有被触发，请检查选择元素中的 select2 类。移除 select2 类将解决该问题。

- sudin