使用远程数据加载语义UI下拉列表

Question

我一直在阅读语义ui远程内容文档中的下拉列表（ 此处 ），但似乎无法弄清楚在我的情况下如何使用它。

我有一个查询back4app（解析）所需数据并将其转换为JSON的函数。 如何将返回的数据填充到下拉列表中？ 我必须手动构建它还是可以以某种方式直接传递JSON？

Answer 1

在下拉初始化中，为远程数据添加apiSettings哈希：

   $(selector)
   .dropdown({
      apiSettings: {
            url: <Your_API_URL>,
            beforeXHR: (xhr) => {
               // Set Custom Headers here 
              xhr.setRequestHeader(key, val)
            },
            onResponse: (response) => {
              // Modify your JSON response into the format SUI wants
              return response
            }
});

这是Semantic-UI期望的响应格式

对于您的用例，您可能必须将功能分为两部分：1.提取数据的部分2.将数据净化为JSON的部分

您将必须使用apiSettings哈希为您获取数据（只需将其放入URL和自定义标头（例如身份验证）中）即可。 这将替换功能的第1部分。

返回数据后，将调用SUI的onResponse（）方法。 在此处调用将数据净化为JSON的函数。

您可能需要稍微修改JSON响应，以符合SUI的期望。

Answer 2

我通过使用ResponseAsync解决了此问题-请参见下面的代码摘录。 这个对我有用。 问题是我没有使用带有解析的URL来运行查询-抱歉，我错过了这个。

$('.ui.dropdown.age_group').dropdown({
    onChange: function(value, text, $choice){
        $('.ui.dropdown.group').dropdown('clear');
      GetGroups();
    ;
    },
    apiSettings: {
        responseAsync: function(settings, callback) {

    var query = new Parse.Query("Teams");
      query.ascending("AGE_GROUP");
    query.find({
     success: function(results) {
         var jsonArray = [];

     // Create the JSON array that the dropdown needs
        for(var i = 0; i < results.length; i++) {
           jsonArray.push(results[i].toJSON());
        }

    // Create the required json for the dropdown (needs name and value)
        var myresults = jsonArray.map(function(item) {
            return {
                name: item,
                value: item
            }
        });

        var response = {
            success: true,
            results: myresults
          };
      // This will populate the dropdown
          callback(response);
        },
        error: function(error) {

      }
    });
    }
  }
});