我有一个用 ASP.Net MVC3 制作的网站 ( cpusort.com ),用户可以在其中使用 jquery ui 自动完成功能进行搜索并从找到的结果中进行选择。
我正在使用此脚本来获取结果
$(function () {
function log(message) {
}
$("#cpu").autocomplete({
source: "/Search/",
minLength: 1,
response: function (event, ui) {
if (ui.content.length === 0) {
alert("No Result Found");
//.append("<a href='/AdvancedSearch/[search_term]'>More results for [search_term]</a>")
}
},
open: function (event, ui) {
var url = "<a href='/AdvancedSearch/[search_term]'>More results for [search_term]</a>";
$("ul.ui-autocomplete.ui-menu").append(url);
},
select: function (event, ui) {
$("#cpu").val(ui.item.title);
$("#cpu-query").val(ui.item.query);
$("#cpu-clockspeed").val(ui.item.clockspeed);
$("#cpu-cores").val(ui.item.cores);
$("#cpu-image").val(ui.item.cpuimage);
return false;
}
})
.data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li>")
.append("<a href='/Cpu/" + item.query + "'><div style='width:100%'><span class='titlesearch' >" + item.title + "</span></div><div <div style='width:100%'><span class='titlesmallspan'>" + item.clockspeed + " GHz | " + item.cores + "</span></div></a>")
.appendTo(ul);
};
});
但是我如何显示如果没有找到结果,并且在这种情况下我使用警报,我如何附加一个带有文本“提前搜索”的子项
.append("<a href='/AdvancedSearch/[search_term]'>More results for [search_term]</a>")
请帮忙解决一下,谢谢
最佳答案
我建议您使用open
jQuery 自动完成事件
open: function (event, ui) {
search_term = event.target.value;
var d = $('.ui-autocomplete').append("<a href='/AdvancedSearch/[" + search_term + "]'>More results for [" + search_term + "]</a>")
}
这将在自动完成中列出的选项末尾附加您需要的 html 元素。
希望您能理解。
<小时/>更新:
来自您的comments ,看来您尝试通过附加来自动完成的 open
事件不起作用。
相反,您应该选择自动完成的响应
事件。
为什么?
1) open 事件在找到匹配时触发,在未找到匹配时不起作用。
2) 而response
事件在这两种情况下都会触发(这不能用于您的情况#1),但它仅对您的情况#2 有帮助。
response: function (event, ui) {
if (ui.content.length === 0) { //check for none results
search_term = event.target.value;
$(this).next('a').remove(); //Remove before you add
$(this).after("<a href='/AdvancedSearch/[" + search_term + "]'>More results for [" + search_term + "]</a>");
}
}
嗯,我认为这是有道理的。
修改了代码以重新创建与您的问题相同的内容。
关于javascript - Jquery 自动完成没有结果附加为下拉子问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23010927/