parent
2a7ddab2ff
commit
2b8f165539
@ -51,14 +51,14 @@ Sometimes, you may need to add additional query parameters to the request. You
|
|||||||
```
|
```
|
||||||
$('#mySelect2').select2({
|
$('#mySelect2').select2({
|
||||||
ajax: {
|
ajax: {
|
||||||
url: 'https://api.github.com/search/repositories',
|
url: 'https://api.github.com/orgs/select2/repos',
|
||||||
data: function (params) {
|
data: function (params) {
|
||||||
var query = {
|
var query = {
|
||||||
search: params.term,
|
search: params.term,
|
||||||
page: params.page
|
type: 'public'
|
||||||
}
|
}
|
||||||
|
|
||||||
// Query parameters will be ?search=[term]&page=[page]
|
// Query parameters will be ?search=[term]&type=public
|
||||||
return query;
|
return query;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -99,6 +99,64 @@ To provide default selections, you may include an `<option>` for each selection
|
|||||||
|
|
||||||
To achieve this programmatically, you will need to [create and append a new `Option`](/programmatic-control/add-select-clear-items).
|
To achieve this programmatically, you will need to [create and append a new `Option`](/programmatic-control/add-select-clear-items).
|
||||||
|
|
||||||
|
## Pagination
|
||||||
|
|
||||||
|
Select2 supports pagination ("infinite scrolling") for remote data sources out of the box. To use this feature, your remote data source must be able to respond to paginated requests (server-side frameworks like [Laravel](https://laravel.com/docs/5.5/pagination) and [UserFrosting](https://learn.userfrosting.com/database/data-sprunjing) have this built-in).
|
||||||
|
|
||||||
|
To use pagination, you must tell Select2 to add any necessary pagination parameters to the request by overriding the `ajax.data` setting. The current page to be retrieved is stored in the `params.page` property.
|
||||||
|
|
||||||
|
```
|
||||||
|
$('#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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
Select2 will expect a `pagination.more` value in the response. The value of `more` should be `true` or `false`, which tells Select2 whether or not there are more pages of results available for retrieval:
|
||||||
|
|
||||||
|
```
|
||||||
|
{
|
||||||
|
"results": [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"text": "Option 1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"text": "Option 2"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"pagination": {
|
||||||
|
"more": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
If your server-side code does not generate the `pagination.more` property in the response, you can use `processResults` to generate this value from other information that is available. For example, suppose your API returns a `count_filtered` value that tells you how many total (unpaginated) results are available in the data set. If you know that your paginated API returns 10 results at a time, you can use this along with the value of `count_filtered` to compute the value of `pagination.more`:
|
||||||
|
|
||||||
|
```
|
||||||
|
processResults: function (data, params) {
|
||||||
|
params.page = params.page || 1;
|
||||||
|
|
||||||
|
return {
|
||||||
|
results: data.results,
|
||||||
|
pagination: {
|
||||||
|
more: (params.page * 10) < data.count_filtered
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
## Rate-limiting requests
|
## Rate-limiting requests
|
||||||
|
|
||||||
You can tell Select2 to wait until the user has finished typing their search term before triggering the AJAX request. Simply use the `ajax.delay` configuration option to tell Select2 how long to wait after a user has stopped typing before sending the request:
|
You can tell Select2 to wait until the user has finished typing their search term before triggering the AJAX request. Simply use the `ajax.delay` configuration option to tell Select2 how long to wait after a user has stopped typing before sending the request:
|
||||||
|
Loading…
x
Reference in New Issue
Block a user