使用远程数据加载语义 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 的期望。