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.

Solution

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.

Comments

[Eduardo]

Great! That was the problem over here. Setting the 'fields' hash did the trick. Thanks.

[Eduardo]

An issue with this answer is that the dropdown stopped searching, e.g.,: jsfiddle.net/nLghbfs8 by start typing "K" does filter "Koln". Not sure why.

[Parakleta]

@Eduardo When using the API interface it expects the API query to do the filtering for it. You can look at using mockResponseAsync and find the query in the settings object for testing purposes, but otherwise you need your server to filter on the query term.

[Eduardo]

ah, ok, I see. Thanks for the clarification. I will update my server-side code accordingly so it can work as expected. Thanks a lot!

[Laura Silvani]

Hi all, I am facing the same issue here, search is not working anymore...@Parakleta: what does it mean that I have to set my server to filter on the query term? Thanks in advance.

[Parakleta]

@LauraSilvani The documentation states that the URL in the apiSettings will be queried for the filtered response (i.e. the {query} component of the URL) and your server must return a compliant JSON response. Go to the linked documentation page, open the network devtools on your browser and observe the requests/responses as you type.

[Laura Silvani]

@Parakleta: first of all, thanks for replying. My issue is that I do not have a JSON response formatted with 'name' and 'value' pairs, so I am currently using onResponse callback to adjust its format, as per documentation semantic-ui.com/behaviors/api.html#/usage (see Modifying Response JSON). I have opened a question here at stackoverflow.com/questions/37610849 with code example