ajax联想效果,Select2联想下拉菜单AJAX使用方法

项目终于用到了联想查询，本来想直接用LayUI的联想查询，结果发现是静态联想，不支持AJAX，因此只能用了一个国外的插件Select2；

官方文档写的还是挺模糊的，经研究如下：

var selectBrand = $('.selectBrand').select2({

language:'zh-CN', //语言包

ajax: { //AJAX请求

url: '/getBrandList.ajax',

dataType: 'json',

type: "POST",

delay: 1500, //间隔时间

minimumInputLength: 1, //最小输入字符

cache:true, //开启缓存

data: function (params){

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

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

}

return query;

},

processResults: function(data, params){

//修正为select2的格式即:

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

//站长从接口返回的格式为: [{id:0,name:'enhancement'},{id:1,name:'bug'},{id:2,name:'duplicate'}];

//因此使用replace方法进行转换, 将name属性换为text

var results = JSON.parse(JSON.stringify(data).replace(/name/g,"text"));

return {

results: results //返回值

};

},

escapeMarkup: function (markup) { return markup; }, //返回html实体，防止xss注入

}

});

Select2官方地址：戳这里

附注：Select2的语言包加载方法

在官方下载的包里找: dist/js/i18n/zh-CN.js

将这个JS与Select2同时引用，最好引用在Select2.js的下面

然后就可以愉快的使用中文了(参考上述代码)