select2中ajax,Select2-Ajax获取数据

遇到一个需求: 在前端使用Select2设计一个联想输入dropdown, 通过Ajax动态抓取数据

如果用纯H5来实现极其简单, 这里需要用Select2插件来实现

可以也使用H5原生onChange来进行动态提交但是这太愚蠢了, 现成的Select有更好的API啊

花了俩小时完成了这个功能, 官方Doc说的很是模糊..

代码细节:

$('select').select2({

ajax: {

url: "https://api.github.com/search/repositories",

dataType: 'json',

data: function (params) {

var query = { //请求的参数, 关键字和搜索条件之类的

search: params.term //select搜索框里面的value

}

// Query paramters will be ?search=[term]&page=[page]

return query;

},

delay: 1500,

processResults: function (data, params) {

//返回的选项必须处理成以下格式

//var results = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

return {

results: results //必须赋值给results并且必须返回一个obj

};

}

}

});

参考文献