选择2 JS使用Ajax加载远程数据
Select2 JS Loading remote data with Ajax
我正在使用 Select2 JS 版本 4.0.0-rc.1,并且在使用远程 Ajax 方法加载建议时遇到问题。
以下是标记和代码
<select class="form-control input-sm" id="selFrame1" name="selFrame1">
<option> Select Frame </option>
</select>
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
}
});
服务器返回的 JSON 结果
{results: [{"Code":"123360000"},{"Code":"123360358"},{"Code":"123364000"},{"Code":"123400000"}], more: false }
我完全不确定我是否需要编写特定的函数来显示建议,Ajax 部分的评论说我们不应该更改结果 Json 数据。
现在有人请告诉我我还应该做什么才能让代码工作以显示建议。
我想随着 select2 的新版本,很多东西都发生了变化。
您的响应将作为 Select2 3.x 响应返回,这很好。因此,我们提供了processResults
方法(之前results
),因此您可以在客户端修改响应。
在您的情况下,您的响应包括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
}
};
},
然后事情应该开始工作。这还会将响应上的现有 more
属性映射到我们在 Select2 4.0 中迁移到的新pagination
键。
你的 Json 响应必须是这样的:
{
"total_count":2,
"items": [
{"id":"01", "name":"item 1"},
{"id":"02", "name":"item 2"}
]
}
要工作,您需要一个 id 属性。
这是我的配置:
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
});
希望这有帮助!
相关文章:
- 用程序搜索JQuery数据表中的文本
- 要求输入在数据列表中
- 正在将数据主题添加到所有项目
- 函数参数中的数据与指定变量之间的任何性能差异
- 在VanillaJS中模拟模型双向数据绑定
- CSS-如何定位内容数据标题
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- Highcharts系列.数据数据类型限制
- 在jQuery mobile/java脚本的TextBoxes中动态添加未加载的数据.数据具有[object HTMLI
- 严格模式下的图像数据数据分配
- 具有持久数据(数据存储)的Chrome扩展程序
- Java客户端卡在来自nodejs服务器的数据数据流中
- 在gmail线程中从ZIP文件中提取CSV,并将数据写入谷歌表单
- Javascript -定期向服务器发送用户位置数据(多线程)
- 高级javascript源数据-数据表
- 在WebWorker和主线程之间传递二进制数据的最佳实践是什么?
- 在 HTML (SVG) 元素中包含数据/数据密钥
- 在HTML5应用程序中下载后台数据到浏览器数据库- settimeout vs工作线程
- JavaScript 是单线程的吗?如果没有,如何同步访问共享数据