jQuery-select2通过ajax请求获取远端数据

梦里梦外; 2022-05-16 06:36 180阅读 0赞

> select2官网：[https://select2.org/][https_select2.org]

### 目录 ###

*   *  1. 默认发送的查询参数
     *  2. 自定义查询参数（\`ajax.data\`）
     *  3. 把返回参数转换为要求的格式（\`ajax.processResults\`）
     *  4. 预选中状态
     *  5. 分页：使用"infinite scrolling"模式加载数据
     *  6. 延时发送请求
     *  7. 动态url
     *  8. 自定义ajax请求方法
     *  9. 综合实例

## 1. 默认发送的查询参数 ##

*  `term` : The current search term in the search box.
 *  `q` : Contains the same contents as term.
 *  `_type`: A “request type”. Will usually be query, but changes to query\_append for paginated requests.
 *  `page` : The current page number to request. Only sent for paginated (infinite scrolling) searches.

## 2. 自定义查询参数（`ajax.data`） ##

通过`ajax.data`来传递自定义的参数：

$('#mySelect2').select2({
      ajax: {
        url: 'https://api.github.com/orgs/select2/repos',
        data: function (params) {
          var query = {
            search: params.term,
            type: 'public'
          }
    
          // Query parameters will be ?search=[term]&type=public
          return query;
        }
      }
    });

## 3. 把返回参数转换为要求的格式（`ajax.processResults`） ##

$('#mySelect2').select2({
      ajax: {
        url: '/example/api',
        processResults: function (data) {
          // Tranforms the top-level key of the response object from 'items' to 'results'
          return {
            results: data.items
          };
        }
      }
    });

## 4. 预选中状态 ##

要给ajax请求返回的数据设置“预选中”状态需要[create and append a new option][]。

## 5. 分页：使用"infinite scrolling"模式加载数据 ##

为了实现分页，需要通过覆写`ajax.data`来传递分页相关的参数，`params.page`表示需要加载的当前页码。

$('#mySelect2').select2({
      ajax: {
        url: 'https://api.github.com/search/repositories',
        data: function (params) {
          var query = {
            search: params.term,
            page: params.page || 1
          }
    
          // Query parameters will be ?search=[term]&page=[page]
          return query;
        }
      }
    });

在返回结果中需要包括：

"pagination": {
        "more": true
      }

通过more的ture/false来告诉select2是否有更多结果。  
如果返回结果中不直接包含more，也可以通过processResults，结合其他信息进一步计算出more的值，比如说返回了总数据量和当前页码的情况下：

processResults: function (data, params) {
        params.page = params.page || 1;
    
        return {
            results: data.results,
            pagination: {
                more: (params.page * 10) < data.count_filtered
            }
        };
    }

## 6. 延时发送请求 ##

$('#mySelect2').select2({
      ajax: {
        delay: 250 // wait 250 milliseconds before triggering the request
      }
    });

## 7. 动态url ##

如果请求的url不是固定的，或者需要通过一个方法来判断到底请求哪个url：

$('#mySelect2').select2({
      ajax: {
        url: function (params) {
          return '/some/url/' + params.term;
        }
      }
    });

## 8. 自定义ajax请求方法 ##

默认的ajax请求是通过jquery的ajax请求发出的，也可以通过覆写[ajax.transport][]来通过自定义方法发送。

## 9. 综合实例 ##

[通过github的接口来搜索github上面的仓库][github_github]

$(".js-example-data-ajax").select2({
      ajax: {
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            q: params.term, // search term
            page: params.page
          };
        },
        processResults: function (data, params) {
          // parse the results into the format expected by Select2
          // since we are using custom formatting functions we do not need to
          // alter the remote JSON data, except to indicate that infinite
          // scrolling can be used
          params.page = params.page || 1;
    
          return {
            results: data.items,
            pagination: {
              more: (params.page * 30) < data.total_count
            }
          };
        },
        cache: true
      },
      placeholder: 'Search for a repository',
      escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
      minimumInputLength: 1,
      templateResult: formatRepo,
      templateSelection: formatRepoSelection
    });
    
    function formatRepo (repo) {
      if (repo.loading) {
        return repo.text;
      }
    
      var markup = "<div class='select2-result-repository clearfix'>" +
        "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
        "<div class='select2-result-repository__meta'>" +
          "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
    
      if (repo.description) {
        markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
      }
    
      markup += "<div class='select2-result-repository__statistics'>" +
        "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
        "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
        "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
      "</div>" +
      "</div></div>";
    
      return markup;
    }
    
    function formatRepoSelection (repo) {
      return repo.full_name || repo.text;
    }

[https_select2.org]: https://select2.org/
[create and append a new option]: https://select2.org/programmatic-control/add-select-clear-items
[ajax.transport]: https://select2.org/data-sources/ajax#alternative-transport-methods
[github_github]: https://select2.org/data-sources/ajax#additional-examples