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
      };
    }

  }
});

参考文献

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

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