文章最初發(fā)表于szhshp的第三邊境研究所
轉(zhuǎn)載請(qǐng)注明
遇到一個(gè)需求: 在前端使用Select2設(shè)計(jì)一個(gè)聯(lián)想輸入dropdown, 通過(guò)Ajax動(dòng)態(tài)抓取數(shù)據(jù)
如果用純H5來(lái)實(shí)現(xiàn)極其簡(jiǎn)單, 這里需要用Select2插件來(lái)實(shí)現(xiàn)
可以也使用H5原生onChange來(lái)進(jìn)行動(dòng)態(tài)提交但是這太愚蠢了, 現(xiàn)成的Select有更好的API啊
花了倆小時(shí)完成了這個(gè)功能, 官方Doc說(shuō)的很是模糊..
代碼細(xì)節(jié):
$('select').select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
data: function (params) {
var query = { //請(qǐng)求的參數(shù), 關(guān)鍵字和搜索條件之類(lèi)的
search: params.term //select搜索框里面的value
}
// Query paramters will be ?search=[term]&page=[page]
return query;
},
delay: 1500,
processResults: function (data, params) {
//返回的選項(xiàng)必須處理成以下格式
//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并且必須返回一個(gè)obj
};
}
}
});
