Jquery自动完成 - 没有结果消息

时间:2011-12-29 01:43:48

标签: jquery html jquery-ui jquery-ui-autocomplete

如果找不到结果,我希望自动填充在其下拉列表中显示“无结果”列表。

我的情况就像JQuery的默认示例。

$(function() {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
        ];
    $( "#tags" ).autocomplete({
        source: availableTags
    });
});

感谢您的帮助。

2 个答案:

答案 0 :(得分:10)

这是你可以实现这一目标的一种方式:

$(function() {
    var availableTags = [ /* snip */];  
    var NoResultsLabel = "No Results";

    $("#tags").autocomplete({
        source: function(request, response) {
            var results = $.ui.autocomplete.filter(availableTags, request.term);

            if (!results.length) {
                results = [NoResultsLabel];
            }

            response(results);
        },
        select: function (event, ui) {
            if (ui.item.label === NoResultsLabel) {
                event.preventDefault();
            }
        },
        focus: function (event, ui) {
            if (ui.item.label === NoResultsLabel) {
                event.preventDefault();
            }
        }
    });
});

基本上,您需要提供一个函数引用作为自动完成的source。在该函数内部,您可以使用相同的实用程序函数($.ui.autocomplete.filter)来过滤结果。然后你可以看到结果数组是否为空。如果是,则可以向结果列表添加默认消息。

我指定的其他两个选项会阻止选择或关注无结果选项。

示例: http://jsfiddle.net/er6LF/

答案 1 :(得分:0)

这个小提琴有一个功能的例子,你有:http://jsfiddle.net/andrewodri/wAg4g/

我改变了这个:

$("#tags").autocomplete({source: availableTags});

对此:

$("#tags").autocomplete(availableTags);

您可以看到它在最新版本的jQuery上运行,并且在“管理资源”下链接了插件:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

更新:如果您碰巧使用引用的插件,上面的代码可以正常工作...如果没有,它似乎工作原样:)请注意我确实在{{{} { 1}},这可能一直在阻止工作。请看这个分叉的小提琴:http://jsfiddle.net/andrewodri/VLKwe/

希望有所帮助!