![](/img/trans.png)
[英]Material UI Autocomplete- Popper not STUCk to the component which rendered it
[英]jQuery UI autocomplete- no results message
如果沒有結果,我正在嘗試在下拉菜單中顯示“無結果”消息。 例如,如果我在文本字段中輸入“ABCD”,但沒有匹配的實體,則會顯示“無結果”消息。 將顯示。
在查看了 stackoverflow 中實現這一點的各種不同方法並嘗試了其中的一些之后,我仍然無法讓它工作。
找不到結果時,如何向下拉菜單添加“無結果”消息?
jQuery:
$element.autocomplete({
source: function (request, response) {
$.ajax({
url: thUrl + thQS,
type: "get",
dataType: "json",
cache: false,
data: {
featureClass: "P",
style: "full",
maxRows: 12
},
success: function (data) {
response($.map(data, function (item) {
if (data.indexOf(item) === -1) {
return { label: "No Results." }
} else {
return {
label: item.Company + " (" + item.Symbol + ")",
value: item.Company
}
}
}));
}
});
},
minLength: that.options.minLength,
select: function (event, ui) {
reRenderGrid();
}
});
我曾嘗試添加一個 if() 語句,但沒有奏效。
if (data.length === 0) {
// Do logic for empty result.
}
如果我執行以下操作,我可以用文本“無結果”覆蓋第一個條目......
if (data.indexOf(item) === 0) {
return {
label: "No Results."
}
...但如果我設置data.indexOf(item) === -1
什么也沒有顯示。
我最近剛剛嘗試了以下操作,當沒有數據時,它進入循環,但是,菜單中沒有顯示“無結果”:
success: function (data) {
response($.map(data, function (item) {
return {
label: item.Company + " (" + item.Symbol + ")",
value: item.Company
}
}));
if (data.length === 0) {
label: "No Results."
}
}
我還嘗試使用以下來自 Andrew Whitaker 的示例,但沒有成功:
安德魯·惠特克的小提琴: http : //jsfiddle.net/J5rVP/128/
來源: http : //blog.andrewawhitaker.com/2012/10/08/jqueryui-autocomplete-1-9/
if (!ui.content.length) {
var noResult = { value:"",label:"No results found" };
ui.content.push(noResult);
//$("#message").text("No results found");
}
小提琴
http://jsfiddle.net/J5rVP/129/
更新
將代碼放在自動完成設置的末尾select: function (event, ui) {..}
..........
minLength: that.options.minLength,
select: function (event, ui) {
reRenderGrid();
}, //HERE - make sure to add the comma after your select
response: function(event, ui) {
if (!ui.content.length) {
var noResult = { value:"",label:"No results found" };
ui.content.push(noResult);
}
}
});
像這樣修改函數以檢查數據的長度。
success: function (data) {
if(!data.length){
var result = [
{
label: 'No matches found',
value: response.term
}
];
response(result);
}
else{
// normal response
response($.map(data, function (item) {
return {
label: item.CompanyName + " (" + item.SymbolName + ")",
value: item.CompanyName
}
}));
}
}
我的回答幾乎與 @neelmeg 和 @Trever 相同,但我添加了額外的檢查,因此用戶將無法選擇“無結果”消息:
$(".my-textbox").autocomplete({
minLength: 2,
open: function () { $('.ui-autocomplete').css('z-index', 50); },
source: function (request, response) {
$.ajax({
url: "/some-url",
type: "POST",
dataType: "json",
data: { prefix: request.term, __RequestVerificationToken: token },
success: function (data) {
if (!data.length) {
var result = [{ label: "no results", value: response.term }];
response(result);
}
else {
response($.map(data, function (item) {
return { label: item.someLabel, value: item.someValue };
}))
}
}
})
},
select: function (event, ui) {
var label = ui.item.label;
if (label === "no results") {
// this prevents "no results" from being selected
event.preventDefault();
}
else {
/* do something with the selected result */
var url = "some-url"
window.location.href = url;
}
}
});
對我而言,出現此消息的原因是:
MISSING CSS FILES O JQUERY UI
所以添加:
<link rel="stylesheet" href="jqueryui/themes/flick/jquery-ui.css" type="text/css" media="screen" />
<link rel="stylesheet" href="jqueryui/themes/flick/jquery.ui.theme.css" type="text/css" media="screen" />
解決了我的問題
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.