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

Question

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

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

我有一个返回 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 端点返回一个格式如下的 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。例如，尝试添加一个空的 <div class="menu">在选择的底部，希望语义 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 中的格式相匹配，例如，使用“数据值”属性。

但它也不起作用，我见过语义 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> 时才会自动插入元素。

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