Select2-Ajax获取数据

文章最初发表于szhshp的第三边境研究所
转载请注明

遇到一个需求: 在前端使用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
      };
    }

  }
});

参考文献

http://select2.github.io/options.html

http://select2.github.io/examples.html#data-array