Select2 JS使用Ajax加载远程数据

时间:2015-03-11 03:19:47

标签: javascript jquery ajax jquery-select2 jquery-select2-4

我正在使用Select2 JS Version 4.0.0-rc.1,并且无法使用远程Ajax方法加载建议。

以下是标记和代码

<select class="form-control input-sm" id="selFrame1" name="selFrame1">
   <option> Select Frame </option>
</select>

JavaScript Jquery

$('#selFrame1').select2({
        ajax: {
          url: siteUrl+"suggest/frames",
          dataType: 'json',
          delay: 250,
          method:'POST',
          data: function (params) {
            return {
            q: params.term, // search term
            page: params.page
            };
         },
         processResults: function (data, page) {
         // 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

           return {
             results: data.result
           };
          },
         cache: true
        }
});

服务器返回的Json结果

{results: [{"Code":"123360000"},{"Code":"123360358"},{"Code":"123364000"},{"Code":"123400000"}], more: false }

我完全不确定是否需要编写特定的函数来显示建议,Ajax部分的注释说我们不应该改变结果Json数据。

现在有人请告诉我我还应该让代码工作以显示建议。

我猜新版本的select2已经改变了很多东西。

2 个答案:

答案 0 :(得分:3)

你的回复是作为Select2 3.x回复返回的,这很好。我们之前提供了processResults方法(之前为results),因此您可以修改客户端的响应。

在您的情况下,您的回复包含results密钥,但您的processResponse函数引用了不存在的result密钥。如果您将其更改为

processResults: function (data, page) {
// 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

  return {
    results: data.results,
    pagination: {
      more: data.more
    }
  };
},

然后事情就应该开始了。这还会将响应中的现有more属性映射到我们在Select2 4.0中迁移到的新pagination键。

答案 1 :(得分:1)

你的Json回复必须是这样的:

find

为了工作,你是一个id属性。

这是我的配置:

{
  "total_count":2,
  "items": [
    {"id":"01", "name":"item 1"},
    {"id":"02", "name":"item 2"}
  ]
}

希望这有帮助!