javascript Select2 JS 使用 Ajax 加载远程数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28977996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select2 JS Loading remote data with Ajax
提问by Clain Dsilva
I am using Select2 JS Version 4.0.0-rc.1 and having trouble loading suggestions with remote Ajax method.
我正在使用 Select2 JS 版本 4.0.0-rc.1 并且在使用远程 Ajax 方法加载建议时遇到问题。
Below are the markups and code
下面是标记和代码
<select class="form-control input-sm" id="selFrame1" name="selFrame1">
<option> Select Frame </option>
</select>
the JavaScript Jquery
JavaScript Jquery
$('#selFrame1').select2({
ajax: {
url: siteUrl+"suggest/frames",
dataType: 'json',
delay: 250,
method:'POST',
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, page) {
// parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to
// alter the remote JSON data
return {
results: data.result
};
},
cache: true
}
});
The Json Result returned by server
服务器返回的Json Result
{results: [{"Code":"123360000"},{"Code":"123360358"},{"Code":"123364000"},{"Code":"123400000"}], more: false }
I am totally not sure if I need to write specific functions to show suggestions, the comments on the Ajax section say that we should not alter the result Json data.
我完全不确定是否需要编写特定的函数来显示建议，Ajax 部分的评论说我们不应更改结果 Json 数据。
Now somebody please tell me what more I should to get the code working to show the suggestions.
现在有人请告诉我我还应该做什么才能让代码工作以显示建议。
I guess with the new version of select2 a lot of stuffs have changed.
我猜随着 select2 的新版本，很多东西都发生了变化。
回答by Kevin Brown
Your response is being returned as a Select2 3.x response, which is fine. We've provided the processResultsmethod because of this (previously results) so you can modify the response on the client side.
您的响应将作为 Select2 3.x 响应返回，这很好。我们processResults因此（以前results）提供了该方法，因此您可以在客户端修改响应。
In your case, your response includes the resultskey but your processResponsefunction is referencing a resultkey which does not exist. If you change it to something like
在您的情况下，您的响应包含results键，但您的processResponse函数引用了一个result不存在的键。如果你把它改成类似的东西
processResults: function (data, page) {
// parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to
// alter the remote JSON data
return {
results: data.results,
pagination: {
more: data.more
}
};
},
Then things should start working. This also maps the existing moreproperty on the response to the new paginationkey that we migrated to in Select2 4.0.
然后事情应该开始工作了。这还将more响应中的现有属性映射到pagination我们在 Select2 4.0 中迁移到的新密钥。
回答by Eve
Your Json response has to be like this :
你的 Json 响应必须是这样的：
{
"total_count":2,
"items": [
{"id":"01", "name":"item 1"},
{"id":"02", "name":"item 2"}
]
}
To work, you an id property.
为了工作，你有一个 id 属性。
Here is my config :
这是我的配置：
function formatRepo (repo) {
if (repo.loading) return repo.text;
var markup = "<div class='select2-result-repository clearfix'><div class='select2-result-repository__img'><img src='" + repo.img + "' width='80' height='80' /></div><div class='select2-result-repository__meta'><div class='select2-result-repository__title'>" + repo.full_name + "</div>";
markup += "<div class='select2-result-repository__statistics'><div class='select2-result-repository__type'><i class='fa fa-flash'></i> Type : " + repo.type + "</div><div class='select2-result-repository__usecase'><i class='fa fa-eye'></i> Use case : " + repo.usecase + "</div></div></div></div>";
return markup;
}
function formatRepoSelection (repo) {
return repo.full_name;
}
// Init select2
$(".select2").select2({
ajax: {
type : "GET",
url : "{{ path('tag_search_js') }}",
dataType: 'json',
delay : 250,
data : function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
placeholder: "Select a tag",
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
Hope this helps !
希望这可以帮助 ！
