jQuery-select2通过ajax请求获取远端数据

select2官网：https://select2.org/

1. 默认发送的查询参数

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.

2. 自定义查询参数（`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=publicreturn query;}}
});

3. 把返回参数转换为要求的格式（`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};}}
});

4. 预选中状态

要给ajax请求返回的数据设置“预选中”状态需要create and append a new option。

5. 分页：使用"infinite scrolling"模式加载数据

为了实现分页，需要通过覆写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}};
}

6. 延时发送请求

$('#mySelect2').select2({ajax: {delay: 250 // wait 250 milliseconds before triggering the request}
});

7. 动态url

如果请求的url不是固定的，或者需要通过一个方法来判断到底请求哪个url：

$('#mySelect2').select2({ajax: {url: function (params) {return '/some/url/' + params.term;}}
});

8. 自定义ajax请求方法

默认的ajax请求是通过jquery的ajax请求发出的，也可以通过覆写ajax.transport来通过自定义方法发送。

9. 综合实例

通过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 termpage: 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 usedparams.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 workminimumInputLength: 1,templateResult: formatRepo,templateSelection: formatRepoSelection
});function formatRepo (repo) {if (repo.loading) {return repo.text;}var markup = "<div class='select2-result-repository clearfix'>" +"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +"<div class='select2-result-repository__meta'>" +"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";if (repo.description) {markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";}markup += "<div class='select2-result-repository__statistics'>" +"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +"<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +"</div>" +"</div></div>";return markup;
}function formatRepoSelection (repo) {return repo.full_name || repo.text;
}

jQuery-select2通过ajax请求获取远端数据相关推荐

ajax请求获取服务器数据,jquery.ajax发布从app引擎服务器获取数据的请求
为noob问题道歉...... 您好,如何使用jQuery.ajax从appengine服务器的Python端获取数据?我知道如何使用ajax和适当的处理程序将数据发送到服务器,但我想知道是否有人可以 ...
vue ajax传输数组,ajax请求回数组数据，Vue页面数组没同步问题
记录bug 为什么 ajax 获取到了 vm.$data.list 页面上却没有显示出来的? 代码 //页面 {{ *** }} //请求数据 send: function(){ var that = ...
ajax. jquery. 异步,jQuery之异步Ajax请求使用
$.ajax({type:'',data:'',async:''...}) 参数: 1.cache: true缓存页面 false 不缓存页面 (默认: true,dataType为script和js ...
python爬虫爬取使用Ajax请求的网站数据解析——以梅老板微博为例（m.weibo.cn）
文章目录前言什么是Ajax Ajax基本原理发送请求解析内容渲染网页 Ajax分析方法查看请求过滤请求 Ajax结果提取 1.分析请求(since_id解析) 2.分析响应 3.爬取微博 ...
Maven| 前端JQuery调用【ajax请求数据】并打印成表格
目录序正文 1.前端 2.后端序效果演示先给出结果,如果有用就继续浏览,没有帮助就可以关掉这篇文章啦! 数据库内容:(借用之前配置的maven项目,对数据库test表news进行查询) 效果 ...
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
jquery ajax 不执行success,jQuery通过ajax方法获取json数据不执行success的原因及解决方法...
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
ajax 怎么input赋值,jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签...
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签发布于 2016-11-25 16:26:40 | 111 次阅读 | 评论: 0 | 来源: ...

jQuery-select2通过ajax请求获取远端数据

目录

1. 默认发送的查询参数

2. 自定义查询参数（`ajax.data`）

3. 把返回参数转换为要求的格式（`ajax.processResults`）

4. 预选中状态

5. 分页：使用"infinite scrolling"模式加载数据

6. 延时发送请求

7. 动态url

8. 自定义ajax请求方法

9. 综合实例

jQuery-select2通过ajax请求获取远端数据相关推荐

最新文章

热门文章

jQuery-select2通过ajax请求获取远端数据

目录

1. 默认发送的查询参数

2. 自定义查询参数（ajax.data）

3. 把返回参数转换为要求的格式（ajax.processResults）

4. 预选中状态

5. 分页：使用"infinite scrolling"模式加载数据

6. 延时发送请求

7. 动态url

8. 自定义ajax请求方法

9. 综合实例

jQuery-select2通过ajax请求获取远端数据相关推荐

最新文章

热门文章

2. 自定义查询参数（`ajax.data`）

3. 把返回参数转换为要求的格式（`ajax.processResults`）