select2官网:https://select2.org/
term
: The current search term in the search box.q
: Contains the same contents as term._type
: A “request type”. Will usually be query, but changes to query_append for paginated requests.page
: The current page number to request. Only sent for paginated (infinite scrolling) searches.ajax.data
)通过ajax.data
来传递自定义的参数:
$('#mySelect2').select2({
ajax: {
url: 'https://api.github.com/orgs/select2/repos',
data: function (params) {
var query = {
search: params.term,
type: 'public'
}
// Query parameters will be ?search=[term]&type=public
return query;
}
}
});
ajax.processResults
)$('#mySelect2').select2({
ajax: {
url: '/example/api',
processResults: function (data) {
// Tranforms the top-level key of the response object from 'items' to 'results'
return {
results: data.items
};
}
}
});
要给ajax请求返回的数据设置“预选中”状态需要create and append a new option。
为了实现分页,需要通过覆写ajax.data
来传递分页相关的参数,params.page
表示需要加载的当前页码。
$('#mySelect2').select2({
ajax: {
url: 'https://api.github.com/search/repositories',
data: function (params) {
var query = {
search: params.term,
page: params.page || 1
}
// Query parameters will be ?search=[term]&page=[page]
return query;
}
}
});
在返回结果中需要包括:
"pagination": {
"more": true
}
通过more的ture/false来告诉select2是否有更多结果。
如果返回结果中不直接包含more,也可以通过processResults,结合其他信息进一步计算出more的值,比如说返回了总数据量和当前页码的情况下:
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.results,
pagination: {
more: (params.page * 10) < data.count_filtered
}
};
}
$('#mySelect2').select2({
ajax: {
delay: 250 // wait 250 milliseconds before triggering the request
}
});
如果请求的url不是固定的,或者需要通过一个方法来判断到底请求哪个url:
$('#mySelect2').select2({
ajax: {
url: function (params) {
return '/some/url/' + params.term;
}
}
});
默认的ajax请求是通过jquery的ajax请求发出的,也可以通过覆写ajax.transport来通过自定义方法发送。
通过github的接口来搜索github上面的仓库
$(".js-example-data-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
},
placeholder: 'Search for a repository',
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
function formatRepo (repo) {
if (repo.loading) {
return repo.text;
}
var markup = "" +
"" +
"";
return markup;
}
function formatRepoSelection (repo) {
return repo.full_name || repo.text;
}