Jquery自动完成没有结果附加为下拉子项问题

时间:2014-04-11 11:08:49

标签: javascript asp.net-mvc-3 jquery-ui jquery-autocomplete jquery-ui-autocomplete

我有一个在ASP.Net MVC3中制作的网站(cpusort.com),用户可以使用jquery ui自动完成功能进行搜索,并从找到的resutls中进行选择。

我将这个脚本用于resutls

        $(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>")

请帮忙解决这个问题,谢谢

1 个答案:

答案 0 :(得分:1)

我建议您使用jQuery自动完成的open事件

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元素。

JSFiddle#1

希望你能理解。


更新

comments开始,您似乎尝试通过附加哪些内容对open自动完成事件不起作用。

相反,你应该去 response 自动完成事件。

为什么?

1)当找到匹配时触发开放事件,并且在找不到匹配时它不会工作。

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>");
            }
        }

JSFiddle#2

这是有道理的,我想是的。

修改代码以重新创建与您的问题相同的内容。