javascript – 来自API的语义UI下拉选择内容
作者:互联网
我正在使用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格式的城市的服务,然后在控制台中显示语义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”>在select的底部,希望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,所以它没有任何区别.最后,我的问题仍然存在,并且下拉选项中没有插入任何项目.
解决方法:
如果没有你发布你正在使用的代码,我会在这里采取一些措施,但下拉预计数据结果将被键入{name:“Item 1”,value:“value1”},如下所述. relevant part of the documentation.
如果您有不同的字段名称,则可以在设置中提供字段结构以覆盖这些:
$('.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>的情况下才会自动插入元件.
但是请注意,在我认为是下拉行为的错误时,它将不会加载数据,直到您开始在搜索字段中键入,因此只需单击下拉图标是不够的.
标签:json,javascript,drop-down-menu,semantic-ui,html 来源: https://codeday.me/bug/20190611/1222006.html