Semantic UI dropdown selection content from API

Question

I am using Semantic UI 2.0 and trying to use data returned from its API to build the options inside my dropdown.

For the dropdown itself, I am using a code that is pratically the same as this code shown in Semantic UI's 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, then Semantic UI shows in the console that the result was successful with 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 return a 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 that Semantic UI does not directly understand the format of the 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.,:

<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 that in 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.

How exactly are you fetching this data? Could you post the relevant code? — fstanis
Sorry for the long delay to respond how I am fetching this data. Previously I was using the default .api function within semantic-ui. Since it was not working, now I am using a ajax call and filling up the menu by myself, instead of using the automatic process of semantic-ui api. I will try to redo the code I was using before and I will update the question. — Eduardo

Parakleta Parakleta · Accepted Answer · 2015-09-24T05:21:41

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.

If you have a different field names then you can provide a fields structure in the settings to override these:

$('.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:

<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.

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.

Semantic UI dropdown selection content from API

1 Answers