how to show results in semantic-ui api

Question

i have problem with semantic-ui api i use it on multiple select element to retrieve the item from the server here is my javascript code

$('select[name=problems]').dropdown('destroy').dropdown({
    minCharacters: 3,
    saveRemoteData: false,
    apiSettings: {
        on: 'change',
        url: '/ajax/contest.getProblemQuery/',
        method: 'post',
        data: {
            argv: {
                page: 0,
                limit: 1000
            }
        },
        beforeSend: function (settings) {
            settings.data.argv.q = settings.urlData.query;
            return settings;
        },
        beforeXHR: function (xhr) {
            console.log('xhr');
            console.log(xhr);
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.setRequestHeader('X-CSRFToken', $.cookie('csrftoken'));
            return xhr;
        },
        onResponse: function (response) {
            console.log('onresp');
            if ( response != 'F' && response.length != 0 ) {
                var list = {results: [], success: true};
                for ( var i = 0; i < response.items.length; ++i ) {
                    list.results.push({
                        value: response.items[i][0],
                        name: response.items[i][1] + ' - ' + response.items[i][2],
                        text: response.items[i][1] + ' - ' + response.items[i][2]
                    });
                }
                return list;
            }
            else
                return {success: false};
        },
        successTest: function (response) {
            return response.success || false;
        },
        onComplete: function (response, element, xhr) {
            // always called after XHR complete
        },
        onSuccess: function (response, element) {
            console.log('suc');
            console.log(response);
            // valid response and response.success = true
        },
        onFailure: function (response, element) {
            console.log('fail');
        },
        onError: function (errorMessage, element, xhr) {
            // invalid response
        },
        onAbort: function (errorMessage, element, xhr) {
            // navigated to a new page, CORS issue, or user canceled request
        }
    }
});

my problems:

1. it does not send the request until i put "{query}" in side the url.
2. when it sends the request and receives the data, all data stores in browser session storage. i set 'saveRemoteData' to false but after each request i checked the storage and i found the new record on that.
3. after it receives the response i change the format to what is said in sematic-ui.com/modules/dropdown.html#/examples [remote content] but it does not show me the items in dropdown section.

Answer 1

when it sends the request and receives the data, all data stores in browser session storage. i set 'saveRemoteData' to false but after each request i checked the storage and i found the new record on that.

Probably it's the API's bug. I've had the same issue, and I couldn't find solving in internet. So I wrote my own kludge.

HTML:

<div id="my_dropdown" class="ui multiple 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>

and JS inside dropdown({}):

beforeSend: function(settings) {
    /**
     * minCharacters option doesn't work form me with dropdown,
     * so I'm checking length manually and clear the search result in DOM
     * and reject request if search string is too short
     */
     if ($("#my_dropdown").find("input.search").val().length < 3) {
         $("#my_dropdown").find(".menu.transition.visible").html("");
         return false;
     }
     /**
      * here I'm manually clearing the cache in localStorage
      */
     if (typeof(Storage) !== "undefined") {
         var sStorage = window.sessionStorage;
         //console.log(sStorage.getItem("/my/request/url/"));
         sStorage.removeItem("/my/request/url/");
     }
     /**
      * some standard actions
     */
     settings.data.str = $("#my_dropdown").find("input.search").val();
     console.log(settings.data);
     return settings;
}

Looks a bit ugly, but works for me.