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

Question

我正在使用语义 UI 2.0 并尝试使用从其 API 编辑的数据 return 在我的下拉列表中构建选项。

对于下拉列表本身，我使用的代码实际上与语义 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>

我有一项服务 returns json 格式的城市，然后语义 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 端点 return 一个 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，所以没有什么区别。最后，我的问题仍然存在，下拉列表中没有插入任何项目 selection。

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> 元素时才会自动插入。

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

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

Semantic UI dropdown selection content from API

html

javascript

json

drop-down-menu

semantic-ui