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

Question

我一直在阅读下拉菜单的语义 ui 远程内容文档 (here)，但似乎无法弄清楚如何在我的案例中使用它。

我有一个函数可以查询 back4app（解析）以获取 required 数据并将其转换为 JSON。如何将返回的数据填充到下拉列表中？我必须手动创建 uild 还是可以通过某种方式直接传递 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
            }
});

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

对于您的用例，您可能必须将函数分解为两部分： 1.取数据部分 2.将数据清理成JSON

的部分

您必须使用 apiSettings 哈希为您获取数据（只需放入您的 URL 和自定义 headers，例如身份验证）。这将替换您函数的第 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) {

      }
    });
    }
  }
});

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

Load semantic-ui dropdown with remote data

jquery

json

semantic-ui