Javascript 如何在语义ui api中显示结果
我对语义ui api有问题 我在多个select元素上使用它从服务器检索项目 这是我的javascript代码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/',
$('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;
}