如何在语义-ui api中显示结果

Question

我对语义 ui api 有疑问 我在多个选择元素上使用它来从服务器检索项目 这是我的javascript代码

$('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
        }
    }
});

我的问题：

1. 在我将“{query}”放入 url 之前，它不会发送请求。
2. 当它发送请求和接收数据时，所有数据都存储在浏览器会话存储中。我将 'saveRemoteData' 设置为 false，但在每次请求后我检查了存储，并在其中找到了新记录。
3. 收到响应后，我将格式更改为 sematic-ui.com/modules/dropdown.html#/examples [远程内容] 但它没有显示下拉部分中的项目。

Answer 1

当它发送请求并接收数据时，所有数据都存储在浏览器会话存储中。我将 'saveRemoteData' 设置为 false，但在每次请求后我检查了存储并找到了新记录。

可能是 API 的错误。我遇到了同样的问题，我在网上找不到解决办法。所以我自己写了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>

和下拉列表中的JS（{}）：

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;
}

看起来有点难看，但对我有用。