来自 API 的语义 UI 下拉选择内容

Question

我正在使用 Semantic UI 2.0 并尝试使用从其 API 返回的数据在我的下拉列表中构建选项。

对于下拉列表本身，我使用的代码与 Semantic UI 文档中显示的 this 代码几乎相同：

<div class="ui search selection dropdown select-city">
  <input type="hidden" name="city">
  <i class="dropdown icon"></i>
  <div class="default text">Select City</div>
</div>

我有一个返回 json 格式城市的服务，然后 Semantic UI 在控制台中显示所有 261 个城市的结果都成功：

"Using specified url"   ["/cities/"]    1648
"Querying URL"  ["/cities/"]    0
"Sending request"   [undefined, "get"]  0
"Successful API Response"   [Object { success=true, results=[261]}]

/cities 端点返回一个 json，格式如下：

{"success":true,"results":[{"description":"Opole","data-value":1},{"description":"Wrocław","data-value":2},{"description":"Warszawa","data-value":3},{"description":"Budapest","data-value":4},{"description":"Köln","data-value":5}, ...]}

Semantic UI 好像没有直接理解 json 的格式。

我尝试了许多格式的 json 属性，甚至尝试对 html 进行一些更改。例如，尝试在 select 底部添加一个空的<div class="menu">，希望 Semantic UI 将其填充，例如：

<div class="ui search selection dropdown select-city">
  <input type="hidden" name="city">
  <i class="dropdown icon"></i>
  <div class="default text">Select City</div>
  <div class="menu"></div>
</div>

我正在尝试将属性的格式与example 中的格式相匹配，例如，使用“data-value”属性。

但它也不起作用，我在源代码中看到了 Semantic UI checks for that，所以它没有任何区别。最后，我的问题仍然存在，下拉选择中没有插入任何项目。

Answer 1

如果您不发布您正在使用的代码，我会在这里采取一些措施，但dropdown 希望数据结果键入为{ name: "Item 1", value: "value1" }，如relevant part of the documentation 中所述。

如果您有不同的字段名称，那么您可以在设置中提供 fields 结构来覆盖这些：

$('.ui.dropdown').dropdown({
    fields: { name: "description", value: "data-value" },
    apiSettings: {
        mockResponse: {
            success: true,
            results: [
                {"description":"Opole","data-value":1},
                {"description":"Wrocław","data-value":2},
                {"description":"Warszawa","data-value":3},
                {"description":"Budapest","data-value":4},
                {"description":"Köln","data-value":5}
            ]
        }
    }
});

所需的最低 HTML 为：

<div class="ui search selection dropdown">
    <div class="text">Search</div>
</div>

或：

<div class="ui search selection dropdown">
    <input class="search"></input>
</div>

空的<div class="menu"></div> 会自动插入，但<input class="search"></input> 是必需的，并且只有在您已有<div class="text"></div> 元素时才会自动插入。

但请注意，在我认为下拉行为有问题的情况下，在您开始在搜索字段中输入内容之前，它不会加载数据，因此只需单击下拉图标即可不够。