select2实现异步获取下拉数据

本文主要是介绍select2实现异步获取下拉数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

我想用select2实现这种搜索异步获取下拉数据，怎么做？首先前端代码如下 

$("#id").select2({ajax: {type: 'POST',url: "{{route('get_combination_main_goods')}}", //数据请求路径dataType: 'json',delay: 100,data: function (params) {return {keyword: params.term, // search term 请求参数_token: LA.token,page: params.page,};},processResults: function (data, params) { //服务端返回结果dataparams.page = params.page || 1;return {results: data.map(function (item) {return { //return默认有两个参数id,text，必须这么写不然的话就报错记住,拿个小本本记下来吧id: item.id,text: '产品代码：' + item.sku + '，产品名称：' + item.name_cn}}),//itemListpagination: {more: (params.page * 30) < data.total_count}};},cache: false},placeholder: '请输入组合产品代码或者商品名称',//默认文字提示language: "zh-CN",allowClear: true,//允许清空escapeMarkup: function (markup) {return markup;}, // 返回html实体，防止xss注入;formatResult: function formatRepo(repo) {return repo.text;}, // 函数用来渲染结果formatSelection: function formatRepoSelection(repo) {return repo.text;} // 函数用于呈现当前的选择});

html代码如下

后台代码如下

 后台返回的数据格式如下

 

 

这篇关于select2实现异步获取下拉数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---