Semantic user interface content from API
I am using Semantic UI 2.0 and am trying to use the data returned from the API to create parameters inside my dropdown.
For the dropdown itself, I am using code that is the same as this code shown in the Semantic UI documentation:
<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 and then the Semantic UI shows in the console that the result was successful in all 261 cities:
"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 returns json formatted as:
{"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 the Semantic UI doesn't directly understand the json format.
I've tried many json attribute formats, even trying to modify the html a bit. For example, tried adding an empty one <div class="menu">
at the bottom of the list, hoping the Semantic UI would fill it, e.g .:
<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 example tags , for example using the data-value attribute.
But that didn't work either, I saw Semantic UI check for this in source code, so it doesn't make any difference, In the end my problem persists and no items are inserted into the dropdown.
source to share
Without posting the code you are using, I am hammering a bit here, but dropdown
expect the data results to be injected { name: "Item 1", value: "value1" }
as explained in the relevant part of the documentation .
If you have different field names, you can provide a structure fields
in the settings to override them:
$('.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}
]
}
}
});
Minimum HTML required:
<div class="ui search selection dropdown">
<div class="text">Search</div>
</div>
or
<div class="ui search selection dropdown">
<input class="search"></input>
</div>
Empty is <div class="menu"></div>
automatically inserted, but required <input class="search"></input>
and will be automatically inserted if you already have an item <div class="text"></div>
.
Please note, however, that in my opinion this is a bug in the dropdown behavior, it will not load data until you start typing in the search box and therefore just clicking on the dropdown is not enough.
source to share