我正在使用jQuery自动完成功能,我遇到了问题。 当源中没有结果而不是在自动完成中没有提议时,我得到了之前提出的结果。
这是我的代码:
$("#searchEmployeeSkillSelectorDashboard").autocomplete(
{
source: function (request, response) {
$.ajax({
url: '/Skills/SkillsSearch',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function(data) {
if (data.length > 0) {
response($.map(data, function (item) {
return item;
}));
}
/*else {
noResult = { label: "No results found" };
response($.map(noResult, function(item) {
return item;
}));
}*/
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
if (i.item.val == null)
return;
var selected_skills = [];
$("#skillSearchSelectedItems").find("div").each(function () { selected_skills.push(this.id); });
for (var s = 0; s < selected_skills.length; s++) {
if (selected_skills[s] == i.item.val) {
var modal = $('#reportsModal');
modal.text("The skill: " + i.item.label + " is already in the skill search list!");
return;
}
else {
var modal = $('#reportsModal');
modal.text("");
}
}
var newSkillDiv = $('<div class="span8" style="border:0.5px solid;margin:5px;padding:5px;border-radius:5px;" name="' + i.item.label + '" id="' + i.item.val + '"><p class="text-info">' + i.item.label + '</p> <span style="color:#a8a8a8;"> Skill Level: </span><select class="span1 grades"><option value="0" selected="selected">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select> <span style="color:#a8a8a8;">Months worked on :</span><select class="span2 months"><option value="1">1 to 3 Months</option><option value="2">3 to 6 Months</option><option value="3">6 to 12 Months</option><option value="4">1 to 3 Years</option><option value="5">3 to 6 Years</option><option value="6">More than 6 Years</option></select> <span style="color:#a8a8a8;">Last used :</span><input type="text" data-date-format="dd/mm/yyyy" class="datepicker span2 lastused" placeholder="Last date used" > <i onclick="removeSkillDiv(\'' + i.item.val + '\')" style="float:right" class="icon-remove"></i></div>');
$('#skillSearchSelectedItems').prepend(newSkillDiv);
},
close: function (e, i) {
this.value = '';
$('#searchEmployeeSkillSelectorDashboard').val('');
$(".datepicker").datepicker({ dateFormat: "dd/mm/yyyy" });
},
minLength: 0
}).click(function () {
$(this).autocomplete('search', $(this).val());
}
);
这部分是个问题
success: function(data) {
if (data.length > 0) {
response($.map(data, function (item) {
return item;
}));
}
/*else {
noResult = { label: "No results found" };
response($.map(noResult, function(item) {
return item;
}));
}*/
}
由于我无法强制自动填充功能清空提案:
Should not be getting data picture - here I should be getting no results
检查Json以及类控制器并且没有返回结果 - 空数组......这些不是问题的根源。
此外,当我删除else中的注释部分时,它工作正常 - 显示“找不到结果” - 这是我想强制空数组的地方(不想显示任何内容)。
我尝试在else块中返回一个空数组但它运行ajax自动完成而没有结束 - 显示平滑的屏幕并永久加载而不停止。
提前致谢!
答案 0 :(得分:0)
试试这个:
success: function(data) {
if (data.length > 0) {
response($.map(data, function(item) {
return item;
}));
} else {
this.value = ''
}
}
答案 1 :(得分:0)
如果没有数据,则返回Empty对象作为响应,如下所示。希望这对你有用。
success: function(data) {
if (data.length > 0) {
response($.map(data, function(item) {
return item;
}));
} else {
response([]);
}
}