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

Question

我一直在阅读下拉菜单的语义 ui 远程内容文档 ( here )，但似乎不知道如何在我的情况下使用它。

我有一个函数可以查询 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
            }
});

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

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

您必须使用 apiSettings 哈希来为您获取数据(只需放入您的 URL 和自定义 header (例如身份验证))。这将取代函数的第 1 部分。

当数据返回时，会调用SUI的onResponse()方法。在此调用将数据清理为 JSON 的函数。

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