javascript 来自 API 的语义 UI 下拉选择内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31788777/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Semantic UI dropdown selection content from API
提问by Eduardo
I am using Semantic UI 2.0 and trying to use data returned from its APIto build the options inside my dropdown.
我正在使用 Semantic UI 2.0 并尝试使用从其API返回的数据来构建下拉列表中的选项。
For the dropdown itself, I am using a code that is pratically the same as thiscode shown in Semantic UI's documentation:
对于下拉菜单本身，我使用一个代码，pratically同这个语义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>
I have a service that returns json-formatted cities, then Semantic UI shows in the console that the result was successful with all 261 cities:
我有一个返回 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]}]
The /cities endpoint return a json formatted as:
/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}, ...]}
It looks like that Semantic UI does not directly understand the format of the json.
看起来Semantic UI并不能直接理解json的格式。
I've tried many formats of json attributes, even tried to change a bit the html. For instance, tried to add an empty <div class="menu">in the bottom of the select, hoping that Semantic UI would fill it in, e.g.,:
我尝试了多种格式的 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>
I am trying to match the format of the attributes with the ones from the example, e.g., using "data-value" attribute.
我试图将属性的格式与示例中的格式相匹配，例如，使用“数据值”属性。
But it did not work either, I've seen Semantic UI checks for thatin the source code, so it does not make any difference. At the end, my problem persists and no items are inserted into the dropdown selection.
但它也不起作用，我在源代码中看到了语义 UI检查，所以它没有任何区别。最后，我的问题仍然存在，下拉选择中没有插入任何项目。
回答by Parakleta
Without you posting the code that you're using I'm taking a bit of a stab here, but the dropdownexpects data results to be keyed as { name: "Item 1", value: "value1" }as is explained in the relevant part of the documentation.
如果没有您发布您正在使用的代码，我在这里进行了一些尝试，但dropdown期望数据结果将按照文档{ name: "Item 1", value: "value1" }的相关部分中的说明进行键入。
If you have a different field names then you can provide a fieldsstructure in the settings to override these:
如果您有不同的字段名称，那么您可以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}
]
}
}
});
The minimum HTML required is:
所需的最低 HTML 是：
<div class="ui search selection dropdown">
<div class="text">Search</div>
</div>
or:
或者：
<div class="ui search selection dropdown">
<input class="search"></input>
</div>
The empty <div class="menu"></div>is automatically inserted, but an <input class="search"></input>is required and is only automatically inserted if you already have a <div class="text"></div>element.
空白<div class="menu"></div>会自动插入，但 an<input class="search"></input>是必需的，并且只有在您已经有一个<div class="text"></div>元素时才会自动插入。
Note however that, in what I believe to be a fault with the dropdown behaviour, it will not load the data until you start typing into the search fieldand so just clicking on the dropdown icon is not sufficient.
但是请注意，在我认为是下拉行为错误的情况下，它不会加载数据，直到您开始在搜索字段中键入内容，因此仅单击下拉图标是不够的。
