使用遠程數據加載語義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) {

      }
    });
    }
  }
});