Javascript 如何通过Ajax请求将Select2与JSON一起使用？
我的3.4.5不能处理JSON数据 这是我的HTML输入框：Javascript 如何通过Ajax请求将Select2与JSON一起使用？,javascript,json,laravel,jquery-select2,Javascript,Json,Laravel,Jquery Select2,我的3.4.5不能处理JSON数据 这是我的HTML输入框： <input class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' /> 我无法将结果添加到Select2下拉列表中。我认为formatSelection和formatResult导致了这个问题，因为我不知道应该在它上面放置什么参数。我不知道从哪里获取容器、对象和查询等参数以及它应该返回的值，还是我的JSON响应错误？
<input class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' />
我无法将结果添加到Select2下拉列表中。我认为
formatSelectionformatResult$("#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
}
})
};
}
}
});
这很容易这里有一个例子
$("#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 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
}
})
};
}
}
});
对于选择2 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
}
})
};
}
}
});
在4.0.2版中，仅在
processResultsresult processResults: function (data) {
return {
results: $.map(data.items, function (item) {
return {
text: item.tag_value,
id: item.tag_id
}
})
};
}
结果数据项<代码>项目{
"items": [
{"id": 1,"name": "Tetris","full_name": "s9xie/hed"},
{"id": 2,"name": "Tetrisf","full_name": "s9xie/hed"}
]
}
在4.0.2版中，仅在
processResultsresult processResults: function (data) {
return {
results: $.map(data.items, function (item) {
return {
text: item.tag_value,
id: item.tag_id
}
})
};
}
结果数据项<代码>项目{
"items": [
{"id": 1,"name": "Tetris","full_name": "s9xie/hed"},
{"id": 2,"name": "Tetrisf","full_name": "s9xie/hed"}
]
}
t故障可能是由不正确的映射引起的。您确定在“数据”中设置了结果集吗？在我的示例中，后端代码在“items”键下返回结果，因此映射应该如下所示：
results: $.map(data.items, function (item) {
....
}
results: $.map(data, function (item) {
....
}
t故障可能是由不正确的映射引起的。您确定在“数据”中设置了结果集吗？在我的示例中，后端代码在“items”键下返回结果，因此映射应该如下所示：
results: $.map(data.items, function (item) {
....
}
results: $.map(data, function (item) {
....
}
这就是我解决问题的方法，我在数据变量中获取数据，通过使用上述解决方案，我得到了错误
无法加载结果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
});
这就是我解决问题的方法，我在数据变量中获取数据，通过使用上述解决方案，我得到了错误
无法加载结果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（函数（）{….}，3000）
我在Vue的安装部分使用它。这需要更多的时间。我的ajax永远不会被炒鱿鱼，除非我把整个事情都打包好
setTimeout（函数（）{….}，3000）
我在Vue的安装部分使用它。这需要更多的时间。如果没有激发ajax请求，请检查select元素中的select2类。删除select2类将解决此问题。如果未触发ajax请求，请检查select元素中的select2类。删除select2类将解决这个问题。这里我给您举一个例子，其中包含-->国旗、城市、州、国家。
[
{
"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",
}
}
},
]
这是我的输出
附加这两个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>
这里我给大家举一个例子，其中包含-->国旗、城市、州、国家。
[
{
"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",
}
}
},
]
这是我的输出
附加这两个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>
感谢对$.Map的建议。您能解释一下“slug”参数吗？项是具有completeName、slug和id属性的对象。这只是一个例子，复制和粘贴。Slug它是item的实际属性，您的item，我添加了这个，因为您可以看到如何添加额外的参数；）我收到此错误jquery.min.js:2 Uncaught TypeError:当我的服务器未返回任何结果时，无法读取null的属性“length”。感谢向$.map提供的建议。您可以解释“slug”参数吗？项是具有completeName、slug和id属性的对象。这只是一个例子，复制和粘贴。Slug它是item的实际属性，您的item，我添加了这个，因为您可以看到如何添加额外的参数；）我收到此错误jquery.min.js:2 Uncaught TypeError:当我的服务器未返回任何结果时，无法读取null的属性“length”。无法使其正常工作…：（没有呼叫服务器。它工作正常。谢谢，我犯的错误没有正确映射到id
和text
键值。无法使此工作正常…：（没有对服务器进行调用。它工作正常，谢谢，我犯的错误没有正确映射到id
和text
键值。如果我从数据中删除项
。项
我不需要在响应右侧添加项
属性？）@bekicot是的，您只需指定$.map（数据，函数）（项）
如果您的json是一个数组：[{“id”：1，“text”：“One”}，{“id”：2，“text”：“Two”}]
我的头撞到了墙上，这就把事情弄清楚了。谢谢你，select2的文档严重缺乏。如果我从数据中删除项
。项
我不需要在响应右侧添加项
属性；）@bekicot是的，你只需指定$.map（数据，函数（项）
如果你的json是一个数组：[{“id”：1，“text”：“One”}，{“id”：2，“text”：“Two”}]
一直在把我的头撞到墙上，这就把事情弄清楚了。谢谢你，select2的文档严重缺乏。但是我对`数据：函数（term）{return term:term}感到困惑}，`但是我对`数据：函数（术语）{return{term:term}；}感到困惑`