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

Javascript 如何在语义ui api中显示结果,javascript,api,dropdown,Javascript,Api,Dropdown,我对语义ui api有问题 我在多个select元素上使用它从服务器检索项目 这是我的javascript代码 $('select[name=problems]').dropdown('destroy').dropdown({ minCharacters: 3, saveRemoteData: false, apiSettings: { on: 'change', url: '/ajax/contest.getProblemQuery/',

我对语义ui api有问题 我在多个select元素上使用它从服务器检索项目 这是我的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
        }
    }
});
我的问题:

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

可能是API的错误。我也遇到过同样的问题,但我在互联网上找不到解决办法。所以我写了我自己的胡言乱语

HTML:

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

看起来有点难看,但对我来说很有用。

您还可以添加apiSettings.cache=false使其进行往返
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;
}