Select2 问题填充 select

Question

这是我第一次尝试使用 select2，我遇到了一个可能很基本的问题。

select控制码：

<select class="form-control" id="trade-select" name="trade-select">
     <option>...</option>
</select>

我正在使用以下代码通过 coldfusion 函数获取数据：

var options =
    {
        theme: 'bootstrap',
        ajax:
        {       
            url: "/ajax/search-trades.cfm",
            dataType: 'json',
            data: function (params) { return { query: params.term, 'groups_only': true }; },

            processResults: function (data, page)
            { // parse the results into the format expected by Select2.
                alert(data.DATA); // see note further below
                return {results: data.DATA, more: false};
            }

        }
    };

    $('#trade-select').css('width', '100%').select2(options)
        .on('change', function(event)
        {
            if (this.value == '') return;
            $('#trade-select').val('').trigger('change');
        });

调用 ajax URL 返回的原始 JSON 数据如下：

{"COLUMNS":["TRADE_CATEGORY"],"DATA":[["Appliance Repairs"],["Furniture Repair"],["Painting &amp; Decorating"]]}

上面代码中的警报returns如下，本质上是一个没有括号或任何东西的逗号分隔列表：

Appliance Repairs,Furniture Repair, Painting & Decorating

问题是 select 没有填充返回的数据。我猜这与返回数据的格式有关。

不确定我是否提供了足够的信息，所以如果您需要任何其他信息，请告诉我。

对于任何可能有想法的 ColdFusion 开发人员，以下是通过 ajax url 调用的 ColdFusion 模板。我意识到我可以在没有中间模板的情况下直接调用 CFC:

<cfsilent>
<cfparam name="url.groups_only" default="true">
<cfparam name="url.query" default="">

<cfset oSystem = createObject("component","cfcs.system")>
<cfset qTradeCategories = oSystem.getTradeCategories(
    groups_only=url.groups_only,
    query=url.query)>
</cfsilent> 
<cfoutput>#SerializeJSON(qTradeCategories)#</cfoutput>

Answer 1

results 的结构应该是一个对象列表，其中每个对象必须有 id 和 text 键：

[
  {
    'id': 4,
    'text': 'some text'
  },
  {
    'id': 3,
    'text': 'some other text'
  }
]

由于您的数据不在该结构中 - 您可以确保发送正确的结构，或在 javascript 中生成它：

results: data.DATA.reduce(function(a, b) { 
      a.push({'id': b[0], 'text': b[0]})
      return a;
 }, [])

data = [["Appliance Repairs"],["Furniture Repair"],["Painting &amp; Decorating"]]

console.log(data.reduce(function(a, b) { 
  a.push({'id': b[0], 'text': b[0]})
  return a;
}, []))

Select2 问题填充 select

Select2 issues populating select

coldfusion

jquery

select2