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

  }
});

參考文獻