gpt4 book ai didi

jquery-select2 - 使用 select2 时无法显示 "Searching"(加载远程数据)

转载 作者:行者123 更新时间:2023-12-04 21:14:20 24 4
gpt4 key购买 nike

引用 https://select2.github.io/examples.html , 加载远程数据时显示文本“Searching”。但是,我不知道为什么在我的案例中显示“未定义”。

这是css文件。

<div class="col-sm-9">
<select class="js-data-example-ajax form-control" style="width:100%;">
<option value="select2/select2" selected="selected">select2/select2</option>
</select>
</div>

以及ajax调用的设置
$(".js-data-example-ajax").select2({
ajax: {
url: "/search/products",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, page) {
return {
results: data.items
};
},
cache: true
},
minimumInputLength: 1,
templateResult: formatProduct,
templateSelection: formatProductSelection
});

结果:

enter image description here

最佳答案

function formatRepo (repo) {
if (repo.loading) return repo.text;

var markup = '<div class="clearfix">' +
'<div class="col-sm-1">' +
'<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' +
'</div>' +
'<div clas="col-sm-10">' +
'<div class="clearfix">' +
'<div class="col-sm-6">' + repo.full_name + '</div>' +
'<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
'<div class="col-sm-2"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
'</div>';

if (repo.description) {
markup += '<div>' + repo.description + '</div>';
}

markup += '</div></div>';

return markup;
}

function formatRepoSelection (repo) {
return repo.full_name || repo.text;
}

$ajax.select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
// 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, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;

return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});

在选择 2 中加载存储库的完整代码您可以根据您的要求更改此代码
enter image description here

我的多选选择框
<select id="to_users" name="to_users" class="form-control js-data-example-ajax" multiple="multiple">
</select>

你可以格式化结果
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: $.map(data, function(obj) {
return { id: obj.user_id, text: obj.name };
})
//results: data
};
},

如果您将结果格式化为 select2 行为,则禁用代码
/*  escapeMarkup: function(markup) {
return markup;
}, // let our custom formatter work

templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page*/

关于jquery-select2 - 使用 select2 时无法显示 "Searching"(加载远程数据),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27899042/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com