如何将帮助消息附加到 jquery 自动完成的末尾答案

【问题标题】：How to append a helper message to the end of jquery Autocomplete如何将帮助消息附加到 jquery 自动完成的末尾
【发布时间】：2012-02-15 00:53:05
【问题描述】：

我正在为搜索字段使用 jQuery 自动完成功能。当自动完成源返回 0 结果的响应时，自动完成感觉坏了。如何始终在自动完成底部添加帮助消息。

我希望帮助消息显示在焦点上，并且随时显示 0 个或更多结果。这是我目前所拥有的：

        var me = this,
            cache = {}, // Autocomplete Caching (not built into jQuery UI by default)
            lastXhr,
            ac_div = $("#header-search-q");

        ac_div.autocomplete({
            appendTo: "#header-search",
            source: function(request, response) {
                var term = request.term.toLowerCase();
                if ( term in cache ) {
                    response( cache[ term ] );
                    return;
                }
                lastXhr = $.getJSON( "/users/search", _(request).extend({'q_type':'all'}), function( data, status, xhr ) {
                    cache[ term ] = data.users;
                    if ( xhr === lastXhr ) {
                        response( data.users );
                    }
                });
            }
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {        
            return $('<li></li>')
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "</a>")
            .appendTo( ul );
        };
    }

我怎样才能在自动完成中总是有这样的 LI：

<li class="helper">Can't find them?</a>

谢谢

【问题讨论】：

标签： jquery jquery-ui jquery-autocomplete autocomplete

【解决方案1】：

您可以在 source 函数中做一个小改动，如下所示：

source: function(request, response) {
                var term = request.term.toLowerCase();
                if ( term in cache ) {
                    response( cache[ term ] );
                    return;
                }
                lastXhr = $.getJSON( "/users/search", _(request).extend({'q_type':'all'}), function( data, status, xhr ) {
                    cache[ term ] = data.users;
                    if ( xhr === lastXhr ) {
                        /* Hack follows: */
                        if(!data.users.length) data.users.push("Can't find them?");
                        response( data.users );
                    }
                });
            }

我最近摆弄了自动完成源代码，发现它清晰且易于自定义和更改其行为，因此这是一种替代方法。

【讨论】：