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

88

我的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，每当我在文本框中键入任何内容时，该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 
— 梅尔文伯德
source

Answers:

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

很简单

— 吐露·帕尔默（Tolo Palmer）
source
2
感谢您对$ .map的建议
— tacos_tacos_tacos 2015年
您能解释“ slug”参数吗？
— IcedD​​ante 2015年
项目是具有completeName，slug和id属性的对象。这只是一个例子，复制粘贴。
— Tolo Palmer
2
ug，它是物料的实际属性，您的物料，我添加了此物料，因为您可以看到如何添加其他参数；）
— Tolo Palmer
4
我收到此错误jquery.min.js：2 Uncaught TypeError：当我的服务器未返回任何结果时，无法读取null的属性“ length”。
— Soptareanu Alex
108

对于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
                    }
                })
            };
        }
    }
});
— 剃刀鱼
source
8
不能得到这个工作... :(正在向服务器发出的呼叫。
— Simanas
它的工作，谢谢，我所犯的错误，没有正确映射到id和text键值。
— Ja8zyjits
18

在4.0.2版中，processResults与in和in略有不同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"}
  ]
}
— 埃巴德·高富里
source
1
如果我items从中删除，则data.items不需要items在响应中添加属性吗？;）
— Yana Agun Siswanto
1
@bekicot是的，您只需要指定$.map(data, function (item) json是否为数组即可：[ {"id": 1,"text": "One"}, {"id": 2,"text": "Two"} ]
— Tantowi Mustofa
2
一直把我的头撞在墙上，这清除了一切。谢谢，严重缺乏select2的文档。
— 尼尔·B
11

在这里，我为您提供示例，其中包含->国旗，城市，州，国家/地区。

这是我的输出。

在此处输入图片说明

附加这两个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）
source
但让我对`data：function（term）{return {term：term}; }，`
— Vikas Katariya
6

这就是我解决问题的方式，我正在数据变量中获取数据，并且通过使用上述解决方案，我得到了error 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）
source
1

这些问题可能是由于映射不正确引起的。确定要在“数据”中设置结果吗？在我的示例中，后端代码在“ items”键下返回结果，因此映射应类似于：

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

并不是：

 results: $.map(data, function (item) {
    ....
    }
— 测试人员
source
1

我的ajax永远不会被解雇，直到我将整个东西包裹起来

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

我在Vue的安装部分中使用了它。需要更多时间。

— 阿皮特·约翰·伊斯梅尔
source
0

如果没有触发ajax请求，请检查select元素中的select2类。删除select2类将解决该问题。

— 苏丁
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.