Question

我使用select2来创建带自动填充的样式化选择框。我有两个选择，从json文件加载数据，或者从array创建一个简单的json，并使用变通方法填充select标记。我读了他们的api例子，但显然我错过了一些东西。我的目标是创建一个包含许多元素的下拉列表，问题是数据是一个巨大的数组，其中包含aprox 15k 单元格。我尝试使用此代码解决方法：

HTML：

<select multiple="multiple" data-placeholder="Select item" id="itemsList">

JS：

var list = $("#itemsList");
var txt = "";
for(var i=0;i<itemsArray.length;i++){
   txt =txt+ '<option value='+itemsArray[i]+'>'+itemsArray[i]+'</option>';
   }
list.append(txt);

这很有效，但显然select2可以更有效地管理事物，因为这种＆＃34;方法＆＃34;需要几秒钟才能将数据加载到DOM。

第二种方法是将json直接加载到select2框并让框架管理构造，但这会导致我出错：Cannot read property 'slice' of undefined。 JSfiddle here

这是代码：
HTML：

<div class="input-group" id="itemContainer"> 
    <label> Select an item: </label>
    <select multiple="multiple" data-placeholder="Items list" id="itemList"> 
    </select>
</div>

JS：

    $("select").select2({
      ajax: {
        //this is a small demo json to illustrate its structure
        url: "https://api.myjson.com/bins/5amne",
        dataType: 'json',
        delay: 0,
        data: function (params) {
          return {
            q: params.term, // search term
            page: params.page
          };
        },
        processResults: function (data, params) {
            console.log(data);
          params.page = params.page || 1;

          return {
            results: data.items,
            pagination: {
              more: (params.page * 30) < data.total_count
            }
          };
        },
        cache: true
      },
      escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
      minimumInputLength: 1,
});

Answer 1

您的processData功能应处理自定义数据格式，例如以select2可理解的方式解析它。以下是它的完成方式：

processResults: function (data) {
    var results = $.map(data, function (value, key) {
        return {
            text: key,
            children: $.map(value, function (v) {
                return {
                    id: v,
                    text: v
                };
            })
        };
    });

    return {
        results: results,
    };
},

请参阅updated JSFiddle

修改

如果您希望select2为您处理过滤，有两种方法：

添加服务器端支持;
处理客户端上的所有内容。

由于您是通过静态JSON文件加载数据，因此需要转到＃2。为此，您首先需要加载所有数据，解析它，然后才初始化select2控件。你可以like this：

function processData(data) {
    return $.map(data, function (value, key) {
        return {
            text: key,
            children: $.map(value, function (v) {
                return {
                    id: key + v,
                    text: v
                };
            })
        };
    });
}

function initSelect2(data) {
    $("select").select2({
        data: data
    });
}

$.ajax({
    url: "https://api.myjson.com/bins/1n1rm",
    dataType: 'json',
    cache: true,
    success: function (data) {
        initSelect2(processData(data));
    }
});

Answer 2

为了将json用于select2，json格式应该是这样的：

{ results: [ {id:'first', text:'a'}, {id:'second', text: 'b'} ]
  , more: false }

JSON format for jquery-select2 multi with ajax

您当前的json似乎没有正确的格式。我认为你应该改变你的json格式。

Select2 - 从15k cells array创建一个自动完成选择框

2 个答案:

修改