[英]Semantic UI dropdown selection content from API
I am using Semantic UI 2.0 and trying to use data returned from its API to 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 this code 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. 我尝试了很多格式的json属性,甚至试图改变一下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, eg,: 例如,尝试在select的底部添加一个空的<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 , eg, using "data-value" attribute. 我试图将属性的格式与示例中的格式相匹配,例如,使用“data-value”属性。
But it did not work either, I've seen Semantic UI checks for that in the source code, so it does not make any difference. 但它也没有用,我在源代码中看到了语义UI 检查 ,所以它没有任何区别。 At the end, my problem persists and no items are inserted into the dropdown selection. 最后,我的问题仍然存在,并且下拉选项中没有插入任何项目。
Without you posting the code that you're using I'm taking a bit of a stab here, but the dropdown
expects 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 fields
structure 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>
会自动插入,但<input class="search"></input>
是必需的,只有在您已经有<div class="text"></div>
才会自动插入<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 field and so just clicking on the dropdown icon is not sufficient. 但是请注意,在我认为是下拉行为的错误时, 它将不会加载数据,直到您开始在搜索字段中键入 ,因此只需单击下拉图标是不够的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.